web-dev-qa-db-ger.com

Angular2 * ngIf Prüft die Länge des Objektarrays in der Vorlage

Siehe https://angular.io/docs/ts/latest/guide/displaying-data.html und stack So prüfen Sie ein leeres Objekt in der Vorlage für Winkel 2 mit * ngIf , wobei der Syntaxfehler selbst weiterhin angezeigt wird Kontext undefiniert. Wenn ich die * ngIf-Bedingung entferne, erhalte ich Werte in teamMembers, wenn ich etwas Wert hineinschiebe, damit ich auf Werte in teamMembers zugreifen kann.

mein teamMember Objekt ist [ ] array Ich versuche das Bedingungsfeld zu überprüfen, ob es 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 toll.

angularangular2-template
59
Karthigeyan
<div class="row" *ngIf="teamMembers?.length > 0">

Dies prüft zuerst, ob teamMembers einen Wert hat und wenn teamMembers keinen Wert hat, versucht sie nicht, auf length von undefined zuzugreifen, da der erste Teil der Bedingung bereits ausfällt.

215
Günter Zöchbauer

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

14
AishApp

Sie können verwenden

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

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

Weil ?.length bereits boolean value zurückgibt.

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

1
Druta Ruslan

Vielleicht ein kleiner Overkill, aber die erstellte Bibliothek ngx-if-empty-or-has-items prüft, ob ein Objekt, ein Satz, eine Map oder ein Array nicht leer ist. Vielleicht hilft es jemandem. Es hat die gleiche Funktionalität wie ngIf (dann wird else and 'as' -Syntax 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>
0
alexKhymenko