ngFor 中的索引不是唯一的

Question

您好，我有基本的 toggle/hide 功能，用于 displaying/hiding 内容，一旦用户点击它。第一次单击时，它会从 API 加载数据。但是有时索引是相同的，所以打开的是 2 个元素而不是一个。

简化html

<div *ngFor="let children of day.filteredChildren$ | async; let j = index">
<div class="child-dayreport" *ngIf="children.hasDayreport == 1">
                    <button class="btn-show-report"
                      (click)="toggleReportVisibility(children.id, selectedDateTitle, j)">{{childrenAll[j].reportExpanded ? 'Verstecke Tagesrapport' : 'Zeige Tagesrapport'}}</button>
                  </div>
                  <div class="child-dayreport" *ngIf="children.hasDayreport > 1">
                    <button class="btn-show-report"
                      (click)="toggleReportVisibility(children.id, selectedDateTitle, j)">{{childrenAll[j].reportExpanded ? 'Verstecke Tagesrapport' : 'Zeige Tagesrapport'}}</button>
                  </div>
<div>

点击处理程序

toggleReportVisibility(id, date, index) {
    console.log('toggleReportVisibility', id, date, index)
    this.childrenAll[index].reportExpanded = !this.childrenAll[index].reportExpanded;

    const currentChild: any = this.childrenAll.filter(child => child.id === id);
    if (currentChild[0].reports.length === 0 && currentChild[0].hasDayreport !== 0) {
      this.getChildrenDailyReport(id, date)
        .then(() => this.childrenAll[index].reports = this.report)

    }
  }

@EDIT 我试过像那样添加 trackBy 函数，但没有成功。

<div *ngFor="let children of day.filteredChildren$ | async; index as j; trackBy: trackByFn">

trackByFn(i: number) {
    return i;
}

Answer 1

我没有准确检查 HTML 文件，这个文件很大...而且这个循环是另一个循环的一部分，所以 *ngFor 索引是正确的。创建独立的计数器 children.counter 变量，它始终是唯一的。

<button class="btn-show-report"
(click)="toggleReportVisibility(children.id, selectedDateTitle, children.counter)">{{childrenAll[children.counter].reportExpanded ? 'Verstecke Tagesrapport' : 'Zeige Tagesrapport'}}</button>

ngFor 中的索引不是唯一的

Index in ngFor is not unique

angular

ionic4