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

【问题标题】：Adding row dynamically by click on the button of the previous row in mat-table angular8?通过单击mat-table angular8中上一行的按钮动态添加行？
【发布时间】：2020-02-10 03:10:11
【问题描述】：

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

我在这里也动态添加列。即通过单击按钮将列动态添加到表中。对于同一个表，我需要如前所述动态添加行。我无法做到这一点。我还没有找到任何解决方案？

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

【问题讨论】：

如果我理解正确，这不只是在表格底部添加静态行的情况吗？或者您希望能够在最后一个动态生成的行上显示按钮？
@KurtHamilton，是的，我想在最后一个动态生成的行上显示“添加行按钮/图标”。

标签： angular angular-material angular6 angular8 mat-table

【解决方案1】：

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

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中声明，但只有在循环位于最后一行时才会显示。

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

【讨论】：

我需要使用相同类型的材料和动态列方案。