Создать поле ввода массива в Angular 6

Question

Я использую Angular 6.

У меня есть более 100 элементов в массиве, которые я должен отобразить в таблице.Первым элементом таблицы является флажок для выбора поля.

Для этого поля ввода флажка я создал formGroup

exportForm: FormGroup;
processedItems: Array<any> = [];

ngOnInit() {
    this.exportForm = this.formBuilder.group({
      product_index: new FormControl([])
    });
}                                                

и в шаблоне

<form [formGroup]="" method="post" (submit)="onSubmit()">
  <table>
    <tr *ngFor="let p of processedItems; let id = index">
      <td>
        {{ id+1 }} <input class="" type="checkbox" formControlName="product_index" title="select" value="{{ id }}">
      </td>
      <td> {{ p.title }}</td>
    </tr>
  </table>
</form>

onSubmit () обработчик.

onSubmit() {
  console.log(this.exportForm.value);
}

Но это дает только один элемент с false

Я хочу получить value выбранного флажка.

Answer 1

Попробуйте это

onSubmit() {
  const selectedOrderValue = this.exportForm.value.product_index
      .map((v, i) => v ? this.processedItems[i].value : null)
      .filter(v => v !== null);
}

Ref This: https://coryrylan.com/blog/creating-a-dynamic-checkbox-list-in-angular