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

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

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

Вот stackbliz: https://stackblitz.com/edit/angular-tfro3c


angular angular8 angular-material mat-table angular6
person srikanth    schedule 09.02.2020    source источник
comment
Если я правильно вас понял, разве это не случай добавления статической строки в конец таблицы? Или вы хотите иметь возможность отображать кнопки в последней динамически сгенерированной строке?   -  person Kurt Hamilton    schedule 09.02.2020
comment
@KurtHamilton, Да, я хочу показать кнопку / значок добавления строки в последней динамически сгенерированной строке.   -  person srikanth    schedule 09.02.2020

Ответы (1)


arrow_upward
1
arrow_downward

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

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

person Kurt Hamilton    schedule 09.02.2020
comment
Мне нужен тот же тип, использующий материал, и сценарий динамических столбцов. - person srikanth; 10.02.2020