Angular2 * ngWenn die Länge des Objektarrays in der Vorlage überprüft wird

87

Refered zu https://angular.io/docs/ts/latest/guide/displaying-data.html und stapeln Wie leeres Objekt in Winkel 2 Vorlage überprüfen mit * ngIf noch immer nicht definiert Syntaxfehler selbst Kontext. Wenn ich die * ngIf-Bedingung entferne, erhalte ich Werte in teamMembers, wenn ich einen Wert hineinschiebe, damit ich auf Werte in teamMembers zugreifen kann.

Mein teamMemberObjekt ist, [ ] arrayich versuche zu überprüfen, ob das Bedingungsarray nach Größe leer ist.

Versuche: 

<div class="row" *ngIf="(teamMembers | json) != '{}'">

und

<div class="row" *ngIf="teamMembers.length > 0"> //Check length great than
                                                 throwing syntax error
            <div class="col-md-12">
                <h4>Team Members</h4>
                <ul class="avatar" *ngFor="let member of teamMembers">
                    <li><a href=""><gravatar-image [size]="80" [email]="member.email"></gravatar-image></a></li>
                </ul>
            </div>
        </div>

Komponente:

@Component({
selector: 'pbi-editor',
})
export class AppComponent implements OnInit {
teamMembers: User[];

Jede Hilfe wäre großartig.

angular angular2-template Karthigeyan Vellasamy
quelle
"Syntaxfehler auslösen" Was ist die genaue Fehlermeldung?
Günter Zöchbauer
ORIGINAL AUSNAHME: TypeError: self.context.teamMembers ist keine Funktion für * ngIf = "teamMembers.length> 0" Ich werde es mit der folgenden Antwort versuchen 1 min pls
Karthigeyan Vellasamy

Antworten:

279 
<div class="row" *ngIf="teamMembers?.length > 0">

Diese prüft zunächst , ob teamMemberseinen Wert , und wenn teamMemberskeinen Wert haben, es nicht versucht , den Zugang lengthvon , undefinedweil der erste Teil der Bedingung bereits versagt.

Günter Zöchbauer
quelle
3
Hier ist der richtige Link zu safe navigation operator: angular.io/guide/template-syntax#safe-navigation-operator
Michael Czechowski
Dies kann dazu führen, dass Operator '>' nicht auf die Typen 'boolean' und 'number' angewendet werden kann. während der Optimierung mit --aot oder prod
krish
18

Sie können *ngIf="teamMembers != 0"damit überprüfen, ob Daten vorhanden sind

AishApp
quelle
2

Möglicherweise ein leichter Overkill, aber die erstellte Bibliothek ngx-if-empty-or-has-items prüft, ob ein Objekt, eine Menge, eine Karte oder ein Array nicht leer ist. Vielleicht hilft es jemandem. Es hat die gleiche Funktionalität wie ngIf (dann wird die Syntax else und 'as' unterstützt).

arrayOrObjWithData = ['1'] || {id: 1}

<h1 *ngxIfNotEmpty="arrayOrObjWithData">
  You will see it
</h1>

 or 
 // store the result of async pipe in variable
 <h1 *ngxIfNotEmpty="arrayOrObjWithData$ | async as obj">
  {{obj.id}}
</h1>

 or

noData = [] || {}
<h1 *ngxIfHasItems="noData">
   You will NOT see it
</h1>
alexKhymenko
quelle
1

Sie können verwenden

<div class="col-sm-12" *ngIf="event.attendees?.length">

Ohne event.attendees?.length > 0oder sogarevent.attendees?length != 0

Da ?.lengthschon boolescher Wert zurückgeben.

Wenn in Array etwas sein wird, wird es angezeigt, sonst nicht.

Druta Ruslan
quelle
0

Dieser Artikel hat mir sehr geholfen herauszufinden, warum es auch bei mir nicht funktioniert hat. Es gibt mir eine Lektion darüber nachzudenken, wie die Webseite geladen wird und wie Winkel 2 als Zeitachse interagiert und nicht nur zu dem Zeitpunkt, an den ich denke. Ich habe niemanden gesehen, der diesen Punkt erwähnt hat, also werde ich ...

Der Grund, warum * ngIf benötigt wird, weil es versucht, die Länge dieser Variablen zu überprüfen, bevor der Rest des OnInit-Materials passiert, und den Fehler "Länge undefiniert" auslöst. Deshalb fügst du das hinzu? weil es noch nicht existiert, aber es wird bald.

Mitchell Matula
quelle