Индекс в ngFor не уникален

Question

Здравствуйте, у меня есть базовая c функция переключения / скрытия для отображения / скрытия контента, когда пользователь нажимает на него. При первом нажатии он загружает данные из 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)

    }
  }

@ ПРАВКА Я ​​пытался добавьте функцию trackBy вот так, но она не сработала.

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

trackByFn(i: number) {
    return i;
}

Answer 1

Я не проверял файл HTML точно, который огромен ... И этот l oop был частью другого l oop, поэтому индексы * ngFor были правильными. Создание независимого счетчика children.counter переменной, которая всегда уникальна.

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