2016-06-28 8 views
1
<ul class="row collapse no-bullet" *ngIf="items"> 
    <li class="columns" [ngClass]="columnSize" *ngFor="#item of items"> 
     <a href="..."> 
      <img class="orbit-image" [src]="getImageSrc(item.image.thumb250)"> 
      <figcaption class="orbit-caption">{{item.location.city}}{{item.handle}}</figcaption> 
     </a> 
    </li> 
</ul> 

VSAngular 2 * ngIf vs elvis Operator in * ngFor

<ul class="row collapse no-bullet"> 
    <li class="columns" [ngClass]="columnSize" *ngFor="#item of items"> 
    <a href="..."> 
     <img class="orbit-image" [src]="getImageSrc(item?.image?.thumb250)" [alt]="item?.caption"> 
     <figcaption class="orbit-caption">{{item?.location?.city}} {{item?.handle}}</figcaption> 
    </a> 
    </li> 
</ul> 

Was besser zu bedienen ist? Das ngIf, um die Elemente nicht zu rendern, nachdem Daten bereit sind, oder den Operator Elvis zu verwenden, um undefinierte Werte zu vermeiden.

+3

In dieser zweiten Fall von Ihnen, sehe ich nicht die Notwendigkeit für die '?' Bei 'Element?' S. Wenn es keine 'Items' gibt, dann wird' ngFor' einfach nicht diese Knoten erzeugen ... – acdcjunior

+0

Sie haben Recht, das ist albern. – jgatjens

Antwort

2

Es hängt der ngIf Operator geschnitten das Element aus DOM eine Wechselwirkung zu verhindern. Die elvis Betreiber halten das DOM Element, aber nicht löst ein Fehler wenn die Eigenschaft Zugriff, im Grunde gibt es undefined wenn nicht vorhanden ist. Wenn Sie Elemente anzeigen möchten, sobald es kommt, verwenden Sie elvis, wenn Sie die Elemente zeigen möchten, wenn es fertig ist, verwenden Sie * ngIf. Ich persönlich bevorzuge es, die Elemente zu zeigen, sobald es fertig ist, denn es zeigt Reaktionsfähigkeit.

Verwandte Themen