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
拆分为两个数组?
或者你可以有一个计算索引的函数,如:<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',
]
【讨论】:
奇怪,但在我的代码中,它在第二个表中获取第一个表的最后一个索引以上是关于Angular:在同一模板中重置索引值的主要内容,如果未能解决你的问题,请参考以下文章
Angular 和 SwiperJS - 在父滑块索引更改时重置嵌套滑块索引