Angular 5 динамически добавляет и удаляет экземпляр компонента

Question

Я пытаюсь создать таблицу, которая выглядит как электронная таблица с редактируемыми входными данными внутри каждого td. Я использую Angular ComponentFactoryResolver, как объяснено здесь , чтобы добавить строку в таблицу, когда пользователь нажимает кнопку добавления.

После добавления строки я использую EventEmitter для вывода всех данных этой строки при изменении значения последнего столбца.

Я пытался реализовать ту же функциональность на этом StackBlitz .

У меня следующие проблемы:

1. Я не могу отправить данные из недавно добавленных компонентов. (Проверьте консоль)
2. Как только я добавляю новую строку, первая строка (не динамическая) также перестает давать мне отправленные данные.
3. Я не уверен, как удалить строку, если она не нужна пользователю, так как у меня нет ссылки на нее.

Answer 1

Это то, что я предлагаю. Вы можете создать список объектов строк в родительском (табличном) компоненте и использовать * ngFor для его повторения.

<app-row 
   *ngFor="let row of rowList" 
   [row]="row" 
   (entryUpdate)="onEntryUpdated($event)">
</app-row>

Пожалуйста, посмотрите на это