Angular 角2有条件的

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

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

{{a.firstname}}

{{a.lastname}



{{b.firstname}

{{b.lastname}

有没有一种方法可以有条件地选择

array1

或

array2

使用

*ngIf

或其他方法进行迭代，这样我就不必重复这么多模板代码？这只是一个例子；我实际的

包含了更多的内容，所以我真的不想重复我自己。谢谢

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

{{a.firstname}}

{{a.lastname}

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

{{a.firstname}}

{{a.lastname}



{{b.firstname}

{{b.lastname}

---

另外，请阅读此处的模板语法：

在同一元素中不能同时包含

*ngFor

和

*ngIf

。您可以使用

*ngFor

在

中创建一个元素。比如：

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

---

或者您可以使用如所示的模板。

您可以使用DOM无法识别的

ng容器

，因此只能用于条件。见下例：

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

{{company.name}
{{company.mseCode}}

上述代码将：`

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

---

`

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

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

{{a.firstname}}

{{a.lastname}

谢谢！这正是我需要的。这将创建不必要的tr行

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