时间戳

首页 > 解决方案 > Angular为每个点击事件维护变量数据

javascript - Angular为每个点击事件维护变量数据

问题描述

我是角度的新手。我在使用 *ngFor 生成的表中有一组行（tr），对于每个表行（tr）我都有一个单击事件，当用户单击 tr 时，我具有展开/折叠功能以下面的表格格式显示数据tr

现在，当用户单击 tr 时，我正在调用一个 API，该 API 为我提供了特定于单击的 tr 的数据，我将该数据设置在我用来在扩展的 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>

我只需要带有 *ngIf 的 tr 应该显示特定于传递的 id 的数据，但是当用户单击多个 tr 时，所有扩展功能的数据都会更改并显示与变量集相关的数据。

有什么方法可以维护以前点击的数据 tr ？

标签： javascripthtmlangular

解决方案

向对象添加扩展属性以处理扩展折叠功能。并且您必须定义一种方法来过滤单击行的详细信息

<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);
}

推荐阅读