Динамически добавлять строки, нажав на кнопку предыдущего ряда в mat-table angular8?

Question

Я хочу добавить новую пустую строку, когда кнопка / значок добавления строки нажимает на предыдущую строку. На данный момент я добавляю новую строку в таблицу, нажав на кнопку, которая находится за пределами таблицы. Но мне нужна кнопка / значок, прикрепленный столбец со строкой. Если я нажму на значок добавления первой строки, новая пустая строка добавится в таблицу, и пользователь сможет ввести детали.

Здесь я добавляю столбцы также динамически. т.е. при нажатии на кнопки динамически добавляются столбцы в таблицу. И для той же таблицы мне нужно было добавлять строки динамически, как объяснено ранее. Я не могу этого сделать. И я не нашел какое-либо решение для этого?

Вот стек: https://stackblitz.com/edit/angular-tfro3c

Answer 1

Я не знаком с Material, поэтому я создал ванильную версию в развилке вашего стекаблица: 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 в каждой строке, но отображается только в том случае, если l oop находится в последнем ряду.

Я не уверен, как вы хотите обработать начальный случай, когда нет строк, поэтому я просто поместил туда строку * stati c. Вы можете сделать что-то лучше.