2 
<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运算符来避免未定义的值。

4

1 回答 1

2

这取决于，ngIf 运算符从DOM中删除元素，防止任何交互。elvis操作符保留DOM元素，但在访问属性时不会抛出错误，基本上如果不存在则返回undefined 。如果您想在元素即将到来时立即显示元素，请使用elvis，如果您想在元素完全准备好时显示元素，请使用*ngIf。我个人更喜欢在准备好后立即显示元素，因为它显示了响应性。

于 2016-06-28T16:56:42.277 回答