Question

我有一个3个表格的模板，这些表格与父母一样具有相同的JSON。

AVERAGEIF

另一个表体

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

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

Answer 1

我测试了你的代码，索引从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'},
    ]
}

Answer 2

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中迭代数据，这样就让reportData行，根据你的consition在ts中进行编辑

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

2 个答案: