Angular io (4) *ngFor first and last

Posted 2023-02-22

【中文标题】Angular 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>

感谢您提供的任何帮助！

【参考方案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等。谢谢你，你是明星！