web-dev-qa-db-ja.com

Angular 2条件付きngFor

テンプレートコードをクリーンアップしようとしています。私は次のものを持っています：

<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>にはもっと多くのコンテンツが含まれているので、繰り返したくありません。ありがとう！

angularangular-ng-ifngfor
9
7ball
  <li *ngFor="let a of (condition ? array1 : array2)">
    <p>{{a.firstname}}</p>
    <p>{{a.lastname}}</p>
  </li>
33
Matej Maloča

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であるすべての会社のリストを表示します

`

2
Mwiza

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

0
Peter Salomonsen

条件に基づいてbootstrap displayプロパティを使用して要素を非表示にできます。

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

同じ要素に*ngForと*ngIfの両方を含めることはできません。 <li>で*ngFor内に要素を作成できます。お気に入り：

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

または、*ngFor内で条件を使用します。このような：

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

または、 Peter Salomonsen のようなテンプレートを使用できます。

0
nick zoum