Question

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

我做了什么：目前，我正在<div>内循环以显示一个表（它有效！）。现在，我还想在每个表行前添加一个按钮，单击该按钮时将显示与该特定行相关的一些其他信息。为此我正在使用ng-bootstrap's Collapse。

问题我正面临着：由于每一行都是可扩展的，行数是动态的，我无法弄清楚如何在不初始化{}内的某个变量的情况下构建可扩展的表行{1}}首先提交文件。此外，我希望所有行在开头都关闭。截至目前，所有展开按钮都具有相同的.ts并引用相同的id。因此，每当我尝试扩展一行时，每一行都会扩展。

以下是boolean variable中的代码：

HTML

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

然后模板绑定到每一行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

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

1 个答案: