Angular io(4)*ng为第一个也是最后一个

Question

我试图判断a中的项是否*ngFor是容器样式的第一个或最后一个元素.有没有办法做这样的事情？

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

感谢您提供的任何帮助!

Answer 1

在里面ngFor你可以访问几个变量:

• index:number:iterable中当前项的索引.
• first:boolean:当项是iterable中的第一项时为true.
• last:boolean:当项是iterable中的最后一项时为True.
• even:boolean:当项目在iterable中具有偶数索引时为true.
• odd:boolean:当项目在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>

Answer 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指令