Angular io (4) *ngFor first and last

Question

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

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

感谢您提供的任何帮助！

Answer 1

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

index: number: 当前item在iterable中的索引。
first: 布尔值：当该项目是可迭代对象中的第一个项目时为真。
last: 布尔值：当该项目是可迭代对象中的最后一个项目时为真。
偶数：布尔值：当项目在可迭代对象中具有偶数索引时为真。
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 将设置为每个模板的当前循环迭代 context 所以它从 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

Angular io (4) *ngFor first and last

Angular io (4) *ngFor first and last

typescript

angular-template

ngfor

angular