我试图判断*ngFor中的一个项目是第一个还是最后一个设计容器样式的元素.有没有办法做到这一点?

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

谢谢你的帮助!

推荐答案

ngFor中,您可以访问几个变量:

  • 索引:编号:iterable中当前项的索引.
  • first:布尔值:当项是iterable中的第一项时为True.
  • last:布尔值:当项是iterable中的最后一项时为True.
  • 偶数:布尔值:当项在iterable中有偶数索引时为True.
  • 奇数:布尔值:当项在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>

Typescript相关问答推荐

`((PrevState:NULL)=>;NULL)|null`是什么意思?

如何为父类构造函数中的修饰属性赋值?

Redux—Toolkit查询仅在不为空的情况下添加参数

Angular 信号:当输入信号改变值时,S触发取数的正确方式是什么?

如果字符串文字类型是泛型类型,则用反引号将该类型括起来会中断

角效用函数的类型推断

为什么有条件渲染会导致material 自动完成中出现奇怪的动画?

TypeError:正文不可用-NextJS服务器操作POST

在VSCode中显示eslint错误,但在终端中运行eslint命令时不显示?(Vite,React,TypeScript)

使用条件类型的类型保护

作为函数参数的联合类型的键

如何定义这样一个TypeScript泛型,遍历路由配置树并累积路径

为什么我的函数arg得到类型为Never?

如何键入并类型的函数&S各属性

在TypeScript中,如何通过一系列过滤器缩小类型?

顶点堆叠的图表条形图未在正确的x轴上显示

两个名称不同的相同打字界面-如何使其干燥/避免重复?

可以用任意类型实例化,该类型可能与

为什么我会得到一个;并不是所有的代码路径都返回一个值0;switch 中的所有情况何时返回或抛出?(来自vsCode/TypeScript)

React-跨组件共享功能的最佳实践