如何在 angular 中生成索引

Question

如何在 table 标签中添加序列号

Answer 1

可能是因为它会被当作一个字符串来处理。也许在这里做的最好的事情是在组件中做。向 stList 添加另一个字段并将其命名为 RowCounter。然后填充此字段并将其打印到屏幕上。

类似...

let counter: number = 0;
this.stList.forEach((element: any) => {
 element.rowCount = counter+1;
};

****进一步添加以回应评论。****

使其成为模型 stList 的一部分。因此，向您的 StudentData 模型添加一个名为 rowCount 的属性

有点像。

export interface StudentData {
 rowCount:number;
 name:string;
 gender: string;    
 age: number;
 address: Address;
 }

然后像引用其他属性一样引用它

<tr>
    <td>{{st.rowCount}}</td>
    <td>{{st.name}}</td>
    --etc
</tr>

可以说是模型数据。

Answer 2

你需要访问*ngFor指令范围内的索引，所以你应该像下面这样写-

<tr *ngFor=let st of stList;let i = index">
<td>{{i+1}}</td>
/// other columns
</tr>

注意 let 关键字，它将变量的范围限制在 *ngFor 内。

How to generate index in angular