Angular：在同一模板中重置索引值

Posted 2023-03-05

【中文标题】Angular：在同一模板中重置索引值

【英文标题】：Angular: Reset index value in the same template

【发布时间】：2018-09-25 20:15:58

【问题描述】：

我有一个包含 3 个表的模板，这些表与父级具有相同的 JSON。

<tbody>
    <ng-container *ngFor="let row of reportingData.RecommendationData; let i=index">
        <tr *ngIf="row.swRecommendations">
            <td>i+1</td>
            <td> row.swRecommendations.deviceID</td>
        </tr>
     </ng-container>
</tbody>

另一个表体

<tbody>
    <ng-container *ngFor="let row of reportingData.RecommendationData; let j=index">
        <tr *ngIf="row.licenseRecommendations">
            <td>j+1</td>
            <td> row.licenseRecommendations.deviceID</td>
        </tr>
     </ng-container>
</tbody>

所有这些表都在同一个模板中。我将索引值分配给不同的变量（i & j），但增量正在发生，即如果第一个表有 5 行，第二个表从 6 开始而不是 1。如何解决这个问题？

【问题讨论】：

也许您可以将reportingData.RecommendationData 拆分为两个数组？

或者你可以有一个计算索引的函数，如：<td>getIndex(row)</td> 在函数中，你可以有逻辑来确定它是否应该具有重置索引值。你把函数放在组件里

不可能，如果您正在运行您在问题中提出的代码，那么它应该从 0 开始每个索引。

【参考方案1】：

H最近也遇到了同样的问题，因为我们在索引它，递增它会是这样，这个问题的解决方法是这样过滤你的数据在ts中

    this.a= this.reportingData.filter(x => x.swRecommendations);
    this.b= this.reportingData.filter(x => x.licenseRecommendations);
    <tr *ngFor="let row of a"> <tr *ngFor="let row of b">,

然后删除 if 条件并像这样迭代 html 中的数据，让行 reportsData ，根据您在 ts 中的条件进行编辑

【参考方案2】：

我测试了你的代码和索引是从 0 开始的。 请查看我的代码。

Component.html

<h1>First Table</h1>
<table>
    <tr>
        <th>Id</th>
        <th>Name</th>
    </tr>
    <ng-container>
        <tr *ngFor="let a of array;let i = index">
            <th>i + 1</th>
            <th>a.name</th>
        </tr>
    </ng-container>
</table>
<h1>Second Table</h1>
<table>
    <tr>
        <th>Id</th>
        <th>Name</th>
    </tr>
    <ng-container>
        <tr *ngFor="let a of array;let j = index">
            <th>j + 1</th>
            <th>a.name</th>
        </tr>
    </ng-container>
</table>

Component.ts

import  Component  from '@angular/core';
@Component(
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: ['./app.component.scss']
)
export class AppComponent 
    constructor() 
    public array = [
         id: 1, name: 'aaa',
         id: 2, name: 'bbb',
         id: 3, name: 'ccc',
         id: 4, name: 'ddd',
         id: 5, name: 'eee',
         id: 6, name: 'fff',
    ]

【讨论】：

奇怪，但在我的代码中，它在第二个表中获取第一个表的最后一个索引