角度2 * ngIf

Question

<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> 

VS

使用することをお勧めします何

<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> 

？ ngIfデータ準備が完了した後にアイテムをレンダリングしないか、またはElvisオペレータを使用して未定義の値を回避します。

Answer 1

それが依存する、ngIfオペレータは、任意の相互作用を防止するDOMから要素を切りました。 エルビスオペレータが存在しない場合は、基本的には未定義を返し、DOM要素を保持しますが、ないプロパティにアクセスするときにエラーをスローします。 elvisを使用するとすぐに要素を表示したい場合は、要素が完全に準備完了になったときに表示する場合は、* ngIfを使用します。私は個人的には、応答性を示すので、準備が整うとすぐに要素を表示することを好む。