Angular 2 ngIf 与 ngFor 中的 elvis 运算符

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 运算符 cut 来自 DOM 的元素阻止任何交互。 elvis 运算符保留 DOM 元素，但在访问属性，基本上它 returns undefined 如果不存在。如果你想在元素出现时立即显示，请使用 elvis，如果你想在元素完全准备好时显示，请使用 *ngIf。我个人更喜欢在准备好后立即显示元素，因为它显示 响应能力。

Angular 2 ngIf 与 ngFor 中的 elvis 运算符

Angular 2 ngIf vs elvis operator in ngFor

angular

ngfor

Angular 2 *ngIf 与 *ngFor 中的 elvis 运算符

Angular 2 *ngIf vs elvis operator in *ngFor

angular

ngfor

Angular 2 ngIf 与 ngFor 中的 elvis 运算符

Angular 2 ngIf vs elvis operator in ngFor