javascript - 表格行折叠？

Question

我遇到折叠表行数据的问题。当我单击该按钮时，它会切换所有子行，而不是确切的子行。这是片段:

    <table class="table table-bordered table-hover">
      <thead>
        <tr>
          <th class="">Үйлчилгээний ангилал</th>
          <th class="">Код</th>
          <th class="">Үйлчилсэн тоо</th>
          <th class="">Зарцуулсан мин</th>
          <th class="">Зорилт</th>
          <th class="">Зорилт нөхөх</th>
        </tr>
      </thead>
      <tbody *ngFor="let item of nodes; let i = index">
        <tr>
          <td>
            <button
              *ngIf="item.children.length > 0"
              (click)="getChild($event, item.id)"
            >
              <i class="icon-arrow-right5"></i>
            </button>
            {{ item.name }}
          </td>
          <td>{{ item.code }}</td>
          <td>{{ item.count }}</td>
          <td>{{ item.elapsed }}</td>
          <td>{{ item.goal }}</td>
          <td>{{ item.children.length }}</td>
        </tr>
        <tr
          *ngFor="let child of item.children"
          [ngClass]="toggleChild ? 'expand' : 'collapse'"
        >
          <td>{{ child.name }}</td>
          <td>{{ child.code }}</td>
          <td>{{ child.elapsed }}</td>
          <td>{{ child.goal }}</td>
          <td>{{ child.goal }}</td>
          <td>{{ child.goal }}</td>
        </tr>
      </tbody>
    </table>

还有我的 typescript 文件:

nodes = [
    {
      id: 1,
      name: "Санхүү",
      code: "-",
      count: "986",
      elapsed: "08:29",
      goal: "92%",
      children: [
        {
          id: 1,
          name: "Данс нээх харилцах",
          code: "5545",
          count: "986",
          elapsed: "08:29",
          goal: "92%"
        },
        {
          id: 2,
          name: "Карт захиалах",
          code: "4587",
          count: "986",
          elapsed: "08:29",
          goal: "82%"
        }
      ]
    },
    {
      id: 2,
      name: "Санхүүгийн бус",
      code: "-",
      count: "986",
      elapsed: "08:29",
      goal: "80%",
      children: [
        {
          id: 1,
          name: "Данс нээх харилцах",
          code: "5545",
          count: "986",
          elapsed: "08:29",
          goal: "92%"
        },
        {
          id: 2,
          name: "Карт захиалах",
          code: "4587",
          count: "986",
          elapsed: "08:29",
          goal: "82%"
        }
      ]
    },
    {
      id: 3,
      name: "Дундаж",
      code: "-",
      count: "986",
      elapsed: "08:29",
      goal: "80%",
      children: []
    }
  ];
  options = {};

  private getChild(e: any, id: any) {
    this.toggleChild = !this.toggleChild;
    e.stopPropagation();
  }

上面的代码工作正常，但是当我单击按钮时，整个子 tr 展开。我究竟做错了什么？我真正想要的是，当我单击按钮时，它只展开自己的子项。

Answer 1

如果您一次只想切换一项，只需将选定的 id 存储在变量中并使用它来触发 ngClass。

组件.ts:

selectedId : any = '';

private getChild(e: any, id: any) {
    // Check if already expanded
    if(selectedId==id){
        selectedId = '';
    }else{
        selectedId = id;
    }
    ...
}

组件.html:

<tr
    *ngFor="let child of item.children"
    [ngClass]="{'expand' : item.id==selectedId, 'collapse' : item.id!=selectedId}"
>
    ...
</tr>

如果您想同时切换多个项目，请将所选 ID 存储在数组中并使用它。

组件.ts:

selectedId : any[] = [];

private getChild(e: any, id: any) {
    // Check if already present in the array i.e. expanded state
    if(selectedId.indexOf(id)>-1){
        // Remove from the array
        selectedId.splice(selectedId.indexOf(id),1);
    }else{
        // Add to the array
        selectedId.push(id);
    }
    ...
}

组件.html:

<tr
    *ngFor="let child of item.children"
    [ngClass]=" selectedId.indexOf(item.id)>-1 ? 'expand' : 'collapse'"
>
    ...
</tr>