Angular сохранение переменных данных для каждого события клика

Question

Я новичок в angular. У меня есть набор строк (tr) в таблице, созданной с использованием * ngFor, для каждой строки таблицы (tr) у меня есть событие щелчка, когда пользователь нажимает на tr, у меня есть функция раскрытия / свертывания, чтобы показать данные в формате таблицы ниже the tr

Теперь, когда пользователь нажимает на tr, я вызываю API, который предоставляет мне данные, указанные c для нажатого tr, я устанавливаю эти данные в переменной, которую я использую для отображения в расширенном функционале тр. До сих пор все работает нормально, но когда я нажимаю на следующий tr, данные для ранее нажатого tr также изменяются и отображают данные для текущего tr.

<ng-container *ngFor="let data of pageData">
<tr (click)="toggleTable(data.id)">
    <td>{{data.x}}</td>
    <td>{{data.y}}</td>
    <td>{{data.z}}</td>
    <td>{{data.a}}</td>
    <td>{{data.b}}</td>
</tr>
<tr *ngIf="data.id===currDataid && openTable">
    <td colspan="8" [ngClass]="{'p-2': true}">
      <div>
          ...
          <tr *ngFor="let idApiData of allApiData"> //problem here: id API data remains same for all parent tr when the user clicks on any parent tr
          </tr>
      </div>
    </td>
</tr>
</ng-container>

Все, что мне нужно, это tr с * ngIf должен отображать указанные данные c для переданного идентификатора, но когда пользователь нажимает несколько tr, данные для всей расширенной функциональности изменяются и отображают данные относительно набора переменных.

есть ли способ с помощью которого я могу сохранить данные, по которым я ранее нажимал tr?

Answer 1

Добавьте к объекту расширенное свойство для обработки функции разворачивания и сворачивания. И вы должны определить метод для фильтрации деталей строки, по которой щелкнули

<ng-container *ngFor="let data of data1">
  <tr (click)="data.expanded = !data.expanded">
    <td> {{ data.expanded ? '&ndash;' : '+'}} {{data.name}} </td>
    <td> {{data.place}} </td>
    <td> {{data.phone}} </td>
    <td> {{data.hobbies}} </td>
    <td> {{data.profession}} </td>
  </tr>
  <ng-container *ngIf="data.expanded">
    <tr *ngFor="let details of subData(data)">
      <td> {{details.datades.name}} </td>
      <td> {{details.datades.hobbies}} </td>
      <td> {{details.datades.profession}} </td>
    </tr>
  </ng-container>
</ng-container>

Фильтровать данные, используя функцию ниже, или вы можете создать канал для этого

subData(data) {
  return this.data.filter(x => x.id=== data.id);
}