web-dev-qa-db-ja.com

Angular io（4）* ngFor first and last

私は*ngForは、コンテナをスタイルする最初または最後の要素です。このようなことをする方法はありますか？

<md-expansion-panel *ngFor="let item of items" *ngClass="{ 'first' : item.isFirst }">
  <content></content>
</md-expansion-panel>

提供された助けをありがとう！

angularngfor
21
Nicholas Fitton

ngFor内では、いくつかの変数にアクセスできます。

  • index：number：イテラブルの現在のアイテムのインデックス。
  • first：boolean：アイテムがイテラブルの最初のアイテムである場合はtrue。
  • last：boolean：アイテムがイテラブルの最後のアイテムである場合はtrue。
  • even：boolean：アイテムの反復可能に偶数インデックスがある場合はtrue。
  • odd：ブール値：アイテムのiterableに奇数インデックスがある場合はtrue。

そう：

<md-expansion-panel *ngFor="let item of items; first as isFirst"
    *ngClass="{ 'first' : isFirst }">
  <content></content>
</md-expansion-panel>

https://angular.io/api/common/NgForOf のドキュメントにこの例を示します。

<li *ngFor="let user of userObservable | async as users; index as i; first as isFirst">
   {{i}}/{{users.length}}. {{user}} <span *ngIf="isFirst">default</span>
</li>
39
Duncan

この方法は次のとおりです。

<md-expansion-panel *ngFor="let item of items; let first = first; 
      let last = last" *ngClass="{ 'first' : first }">
   <content></content>
 </md-expansion-panel>

NgForは、ローカル変数にエイリアスできるいくつかのエクスポートされた値を提供します。

  • indexは各テンプレートコンテキストの現在のループ反復に設定されるため、0から始まります。

  • firstは、アイテムが反復の最初のものであるかどうかを示すブール値に設定されます。

  • lastは、アイテムが反復の最後のものかどうかを示すブール値に設定されます。

  • evenは、このアイテムに偶数インデックスがあるかどうかを示すブール値に設定されます。

  • oddは、このアイテムに奇数インデックスがあるかどうかを示すブール値に設定されます。

詳細については、 NgFor-directive

7
malbarmawi