通过单击 mat-table angular8 中上一行的按钮动态添加行？

Question

我想在添加行 button/icon 单击上一行时添加新的空行。截至目前，我正在通过单击 table 外部的按钮向 table 添加新行。但我需要 button/icon 附加一列与该行。如果我单击第一行添加图标，新的空行将添加到 table 并且用户可以输入详细信息。

我在这里也动态添加列。即通过单击按钮将列动态添加到 table。对于相同的 table，我需要按照说明动态添加行 previously.I' 我无法做到这一点。我还没有找到任何解决方案？

这里是 stackbliz：https://stackblitz.com/edit/angular-tfro3c

Answer 1

我不熟悉 Material，所以我在你的 stackblitz 的一个分支中创建了一个原始版本：https://stackblitz.com/edit/angular-veunf6

ts

dynamicRows: number[] = [];

addNew() {
  this.dynamicRows.push(this.dynamicRows.length);
}

html

<table>
  <thead>
  <tr>
    <th></th>
    <th>Header</th>
  </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of dynamicRows; let i = index">
      <td>
        <button *ngIf="i === dynamicRows.length - 1" (click)="addNew()">Add New</button>
      </td>
      <td>{{row}}</td>
    </tr>
    <tr *ngIf="dynamicRows.length === 0">
      <td>
        <button (click)="addNew()">Add New</button>
      </td>
      <td></td>
    </tr>
    <tr></tr>
  </tbody>
</table>

这里的想法是按钮始终在每一行的 html 中声明，但仅当循环位于最后一行时才显示。

我不确定您想如何处理没有行的初始情况，所以我只是在其中放置了一个静态行。你可能想做得更好。

通过单击 mat-table angular8 中上一行的按钮动态添加行？

Adding row dynamically by click on the button of the previous row in mat-table angular8?

angular-material

angular

angular6

mat-table

angular8