html - 如何使用 Angular 5 显示可扩展的动态表格？

Question

我的目标:在不使用任何外部表库的情况下显示可扩展的动态表。

我做了什么:目前，我在 <div> 内循环以显示表格(有效!)。现在，我还想在每个表行前面添加一个按钮，单击该按钮将显示与该特定行相关的一些附加信息。为此，我使用 ng-bootstrap's Collapse 。

我面临的问题:由于每一行都是可扩展的并且行数是动态的，我无法弄清楚如何在不初始化 .ts 内的某些变量的情况下构建可扩展的表行先归档。另外，我希望所有行都在开头关闭。截至目前，所有扩展按钮都具有相同的 id 并引用相同的 boolean variable 。因此，每当我尝试扩展一行时，每一行都会扩展。

这是我在 HTML 中的代码:

<div style="display: table-row" *ngFor="let row of rows">
    <button type="button" class="btn" (click)="'isCollapsed'+row.id = !'isCollapsed'+row.id" [attr.aria-expanded]="false"
        aria-controls="'collapse'+row.id">
        E
    </button>
    <div id="'collapse'+row.id" [ngbCollapse]="'isCollapsed'+row.id">
        <div class="card">
            <div class="card-body">
                Some dynamic table content
            </div>
        </div>
    </div>
    <div style="display: table-cell;">
        <input type="checkbox" [checked]="chk" [id]="row.id" [name]="row.id">
    </div>
    <div style="display: table-cell;"> {{row.id}} </div>
    <div style="display: table-cell;"> {{row.name}} </div>
    <div style="display: table-cell;"> {{row.address}} </div>
    <div style="display: table-cell;"> {{row.package}} </div>
    <div style="display: table-cell;"> {{row.notes}} </div>
    <div style="display: table-cell;"> {{row.price}} </div>
    <div style="display: table-cell;"> {{row.status}} </div>
</div>

Answer 1

您可以创建一个包含 rowsControls 的数组来存储有关折叠的信息。在您的组件中，尝试这样的事情:

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

@Component({
  selector: 'ngbd-collapse-basic',
  templateUrl: './collapse-basic.html'
})
export class NgbdCollapseBasic implements OnInit {
  rowsControls = [];
  rows = [{
    id: 0,
    name: 'First row'
  }, {
    id: 1,
    name: 'Second row'
  }, {
    id: 2,
    name: 'Third row'
  }]

  ngOnInit() {
    this.rows.forEach(row => {
      this.rowsControls.push({
        isCollapsed: true
      })
    });
  }
}

然后模板绑定(bind)到每一行 isCollapse 属性，如下所示:

<div *ngFor="let row of rows; let index = index">
  <p>
    <button 
      type="button" 
      class="btn btn-outline-primary" 
      (click)="rowsControls[index].isCollapsed = !rowsControls[index].isCollapsed"
      [attr.aria-controls]="'collapse_' + row.id"
    >
      Toggle
    </button>
  </p>
  <div 
    id="collapse_{{ row.id }}" 
    [ngbCollapse]="rowsControls[index].isCollapsed"
  >
    <div class="card">
      <div class="card-body">
        Some dynamic content of {{ row.name }}
      </div>
    </div>
  </div>
</div>

您可以在此处查看演示:https://angular-dkxc1t.stackblitz.io