Angular io(4)* ng对于第一个和最后一个 [英] Angular io (4) *ngFor first and last

问题描述

我试图告诉*ngFor中的项目是样式容器的第一个元素还是最后一个元素.有没有办法做这样的事情?

I am trying to tell whether an item in an *ngFor is the first or last element to style a container. Is there a way to do something like this?

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

感谢您提供的任何帮助！

Thanks for any help offered!

推荐答案

在ngFor内，您可以访问几个变量:

Inside the ngFor you have access to several variables:

• index:数字:当前项目在可迭代对象中的索引.
• 第一:布尔值:当该项是可迭代项中的第一项时为true.
• last:布尔值:当该项是可迭代项中的最后一项时为true.
• even:boolean:当该项在可迭代项中具有偶数索引时为true.
• odd:布尔值:当该项在可迭代项中具有奇数索引时为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 上的文档给出了此示例:

Documentation at https://angular.io/api/common/NgForOf gives this example:

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

这篇关于Angular io(4)* ng对于第一个和最后一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！