Question

我试图判断*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：当项目是可迭代中的第一项时为真。
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>

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

Angular io（4）* ng为第一个也是最后一个

2 个答案: