Выборка динамических входных данных в Angular 5

Question

Я пытаюсь создать HTML-таблицу, которая выглядит как лист Excel. Пользователи могут нажать кнопку добавления новой записи, чтобы добавить новую строку в таблицу, в которой каждый <td> отображает input. Это выглядит как это .

вот что я делаю:

<tr *ngFor="let row of getRowCount()">
  <td><input type="text" name="date" class="form-control" /></td>
  <td><input type="number" name="start_time" class="form-control" /></td>
  <td><input type="number" name="finish_time" class="form-control" /></td>
  <td width="150px">
    <select name="users" class="form-control">
      <!-- this will be from db -->
      <option value="" selected>Alex</option>
      <option value="">John</option>
    </select>
  </td>
  <td><input type="number" name="duration" class="form-control" /></td>
</tr>

Я хочу отправить все эти входные данные обратно в родительский компонент, когда пользователь нажмет кнопку «Готово». Но у меня возникают проблемы с пониманием того, как анализировать эти динамически созданные входные данные. Одна идея состоит в том, чтобы создать массив объектов, и каждый объект будет содержать поля, такие как name, start_time и т. Д.

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