在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);
}

引用此：https://coryrylan.com/blog/creating-a-dynamic-checkbox-list-in-angular