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

Posted

技术标签:

【中文标题】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 拆分为两个数组? 或者你可以有一个计算索引的函数,如:&lt;td&gt;getIndex(row)&lt;/td&gt; 在函数中,你可以有逻辑来确定它是否应该具有重置索引值。你把函数放在组件里 不可能,如果您正在运行您在问题中提出的代码,那么它应该从 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',
    ]

【讨论】:

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

以上是关于Angular:在同一模板中重置索引值的主要内容,如果未能解决你的问题,请参考以下文章

Angular 和 SwiperJS - 在父滑块索引更改时重置嵌套滑块索引

Angular Reactive Forms 重置值

为啥即使在我们调用其余调用的同一台服务器上运行 Angular 应用程序也会出现 cors 问题

通过模板重置vue js布尔值

前端小白之每天学习记录----angula2--

如何在 Angular 1.5 中为同一组件使用不同的模板 url