Angular 2 条件 ngFor答案

【问题标题】：Angular 2 conditional ngForAngular 2 条件 ngFor
【发布时间】：2017-05-07 06:26:24
【问题描述】：

我正在尝试清理我的模板代码。我有以下内容：

<ul>
  <li *ngIf="condition" *ngFor="let a of array1">
    <p>{{a.firstname}}</p>
    <p>{{a.lastname}}</p>
  </li>
  <li *ngIf="!condition" *ngFor="let b of array2">
    <p>{{b.firstname}}</p>
    <p>{{b.lastname}}</p>
  </li>
</ul>

有没有办法有条件地选择array1 或array2 来迭代使用*ngIf 或其他东西，这样我就不必重复这么多模板代码？这只是一个例子；我实际的<li> 包含更多内容，所以我真的不想重复自己。谢谢！

【问题讨论】：

标签： angular angular-ng-if ngfor

【解决方案1】：

  <li *ngFor="let a of (condition ? array1 : array2)">
    <p>{{a.firstname}}</p>
    <p>{{a.lastname}}</p>
  </li>

【讨论】：

谢谢！正是我需要的。

【解决方案2】：

您可以使用 DOM 无法识别的ng-container，因此只会用于条件。请参见下面的示例：

 <tr *ngFor="let company of companies">
        <ng-container *ngIf="company.tradingRegion == 1">
            <td>{{ company.name }}</td>
            <td>{{ company.mseCode }}</td>
         </ng-container>
  </tr>

上面的代码将：`

显示 tradingRegion == 1 的所有公司的列表

`

【讨论】：

这将创建不必要的 tr 行

【解决方案3】：

在 ngFor 循环外使用带有 [ngIf] 的模板标签。

<ul>
  <template [ngIf]="condition">
   <li *ngFor="let a of array1">
    <p>{{a.firstname}}</p>
    <p>{{a.lastname}}</p>
   </li>
  </template>
  <template [ngIf]="!condition">
   <li *ngFor="let b of array2">
    <p>{{b.firstname}}</p>
    <p>{{b.lastname}}</p>
   </li>
  </template>
</ul>

还可以在此处阅读有关模板语法的信息：https://angular.io/docs/ts/latest/guide/template-syntax.html#!#star-template

【讨论】：

【解决方案4】：

您不能在同一元素中同时拥有 *ngFor 和 *ngIf。您可以使用*ngFor 在<li> 内创建一个元素。喜欢：

<li *ngIf="condition">
    <ul>
        <li *ngFor="let a of array1">

或者使用*ngFor 中的条件。像这样：

<li *ngFor="let a of (condition?array1:array2)">

或者您可以使用 Peter Salomonsen 指示的模板。

【讨论】：

【解决方案5】：

我们可以根据条件使用引导显示属性隐藏元素。

<li [ngClass]="{'d-none': condition}" *ngFor="let a of array1">
 <p>{{a.firstname}}</p>
 <p>{{a.lastname}}</p>
</li>

【讨论】：