Angular io (4) *ngFor first and last答案

【问题标题】：Angular io (4) *ngFor first and lastAngular io (4) *ngFor first and last
【发布时间】：2018-04-06 09:57:22
【问题描述】：

我试图判断*ngFor 中的项目是设置容器样式的第一个元素还是最后一个元素。有没有办法做这样的事情？

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

感谢您提供的任何帮助！

【问题讨论】：

标签： angular typescript ngfor angular-template

【解决方案1】：

在ngFor 中，您可以访问多个变量：

index:number：iterable 中当前项的索引。
first: boolean: 当项是可迭代项中的第一项时为真。
last: boolean: 当该项是可迭代项中的最后一项时为真。
even: boolean: 当项目在 iterable 中有偶数索引时为真。
odd: boolean: 当项目在 iterable 中有奇数索引时为真。

所以：

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

【讨论】：

【解决方案2】：

你可以这样做：

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

一个完整的例子

<div
    *ngFor="let n of items; let itemsCount = count;let idx = index , let isOdd = odd;let first = first ;let last = last;">
    {{n}} ,
    {{itemsCount}} ,
    {{idx}} ,
    odd ? {{isOdd}} ,
    first ? {{first}} ,
    last ? {{last}}
</div>

demo ?

【讨论】：

我很高兴我用谷歌搜索。老实说，我什至不知道这些存在，例如last，first等。谢谢你，你是明星！