Как создать пустую строку в таблице с конкретными полями в угловых 7

Question

У меня есть HTML-страница, как показано на рисунке.

Здесь «Добавить строки» - это кнопка, функциональность которой заключается в создании пустой строки, как показано на рисунке, и пользователь может вводить данные в соответствующие поля.

Поскольку я новичок в угловой версии, пожалуйста, предложите мне лучший способ сделать это и добавьте образец кода, если это возможно.

Answer 1

В моих глазах проще всего создать переменную типа

rowCount = [];

это массив.

В вашем html вы создаете вид ngFor, где вы перебираете массив и создаете количество строк в вашем массиве.

addRow () просто помещает элемент, который может быть моделью или около того, в массив. Что будет в результате рендера новой строки.

код ts

criteriaFormArray = this.formBuilder.array()
....
private insertInFormArray(control: AbstractControl) {
    this.criteriaFormArray.push(control);
  }

рендеринг

<div
    formArrayName="criteria"
    *ngFor="
      let item of criteriaFormArray.controls;
      let i = index;
      let first = first;
      let last = last
    ">....</div>