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 元素，但在访问属性时不会抛出错误，基本上它会返回未定义不存在。如果您希望在使用 elvis 后立即显示元素，如果您想在完全准备就绪时显示元素，请使用 * ngIf 。我个人更喜欢在它准备好后立即展示元素，因为它显示响应性。

角度2 * ngIf与* ngFor中的elvis运算符

1 个答案: