在Angular中展開/折疊表格行-有解無憂

該表要求可以顯示嵌套到每一行的表。只有在同一行中選擇時才能折疊。

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

邏輯問題是控制在另一行（不同）中選擇不會關閉前一行。

uj5u.com熱心網友回復：

為了保持表格行展開直到您單擊要折疊的行，您只需要在每個元素陣列上使用布爾標志即可。我建議在您的陣列下創建屬性為 false 并將其設定為在單擊行時切換。此外，正如@brandon 在評論中提到的，您的 html 無效。所以我稍微修改了一下。

HTML：

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

      <div *ngIf="covenant.isExpanded" >
        <div >
          <table >
            <tr >
              <th >header 1</th>
              <th >header 2</th>
              <th >header 3</th>
            </tr>
            <tr >
              <td >1</td>
              <td >2</td>
              <td >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;
  }
}

在這里玩

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/339578.html

標籤：有角的 html-table

上一篇：在材料手風琴中重新加載資料源后保持擴展行狀態

下一篇：ngClass結合多個條件？