在 Angular 中展开/折叠表格行答案

【问题标题】：Expand/collapse table rows in Angular在 Angular 中展开/折叠表格行
【发布时间】：2021-12-12 19:43:19
【问题描述】：

表格要求可以显示嵌套到每一行的表格。只能在同一行中选择时折叠。

<table class="table">
  <thead>
    <tr class="header-row">
      <th class="header">Province</th>
    </tr>
  </thead>
  <tbody class="table-row-expanded" *ngFor="let covenant of covenants; let i = index">
    <tr class="table-row-not-expanded">
      <td class="cell" (click)="selectItemCoverages(i)"> {{ covenant.provinceID }}
        <ng-container *ngIf="openCoverages && indexSelectedCoverage === i">
          <table class="table">
            <thead>
              <tr class="header-row">
                <th class="header">header 1</th>
                <th class="header">header 2</th>
                <th class="header">header 3</th>
              </tr>
            </thead>
            <tbody>
              <tr class="table-row">
                <td class="cell">1</td>
                <td class="cell">2</td>
                <td class="cell">3</td>
              </tr>
            </tbody>
          </table>
        </ng-container>
      </td>
    </tdr>
  </tbody>
</table>

组件：

selectItemCoverages(index: number) {
  this.openCoverages = this.openCoverages && this.indexSelectedCoverage === index ? false : true;
  this.indexSelectedCoverage = index;
}

逻辑问题是控制在另一行（不同）中选择不会关闭前一行。

【问题讨论】：

我没有看到任何逻辑问题。其工作正常见here
此 HTML 完全无效。您不能将 div 标签混合到表格中。
@NimittShah 在另一行中选择关闭前一个，它不应该关闭它。仅当您单击同一行时才会关闭。
如果只需要遍历表中的数据，可以使用ng-container，它不会添加额外的标签。此外，如果您要添加嵌套表，它必须出现在 td 标记内。

标签： angular html-table

【解决方案1】：

为了在单击要折叠的行之前保持表格行展开，您只需要在每个元素数组上使用布尔标志。我建议在您的数组下创建属性为 false 并将其设置为在单击行时切换。此外，正如评论中提到的@brandon，您的 html 无效。所以我稍微修改了一下。

HTML：

<table class="table">
  <tr class="header-row">
    <th class="header">Province</th>
  </tr>
  <tr
    class="table-row-not-expanded"
    *ngFor="let covenant of covenants; let i = index"
  >
    <td class="cell" (click)="covenant.isExpanded = !covenant.isExpanded">
      <div>{{ covenant.provinceID }}</div>

      <div *ngIf="covenant.isExpanded" class="expanded-panel">
        <div class="table-container">
          <table class="table">
            <tr class="header-row">
              <th class="header">header 1</th>
              <th class="header">header 2</th>
              <th class="header">header 3</th>
            </tr>
            <tr class="table-row">
              <td class="cell">1</td>
              <td class="cell">2</td>
              <td class="cell">3</td>
            </tr>
          </table>
        </div>
      </div>
    </td>
  </tr>
</table>

TS：

import { Component, OnInit, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  name = 'Angular ' + VERSION.major;

  covenants: any = [
    { provinceID: 1 },
    { provinceID: 2 },
    { provinceID: 3 },
    { provinceID: 4 },
    { provinceID: 5 },
  ];

  openCoverages = false;
  indexSelectedCoverage = 1;

  ngOnInit() {
    this.covenants.forEach((_covenants) => {
      _covenants.isExpanded = false;
    });
  }
  selectItemCoverages(index: number) {
    //this.openCoverages = this.openCoverages && this.indexSelectedCoverage === index ? false : true;
    //this.indexSelectedCoverage = index;
  }
}

Play here

【讨论】：