Angular 2条件ngFor

7ba*_*all 11 angular-ng-if ngfor angular

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

<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>
Run Code Online (Sandbox Code Playgroud)

有没有办法有条件地选择array1array2迭代使用*ngIf或东西,以便我不必重复这么多的模板代码?这只是一个例子; 我的实际<li>内容包含更多内容,所以我真的不想重复自己.谢谢!

Mat*_*oča 36

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


Mwi*_*iza 5

您可以使用ng-containerDOM 无法识别的 ,因此仅用于条件。请参阅下面的示例:

 <tr *ngFor="let company of companies">
        <ng-container *ngIf="company.tradingRegion == 1">
            <td>{{ company.name }}</td>
            <td>{{ company.mseCode }}</td>
         </ng-container>
  </tr>
Run Code Online (Sandbox Code Playgroud)

上面的代码将:`

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

`

  • 这将创建不必要的 tr 行 (2认同)