在 angular 9 中创建多个复选框对我不起作用

Question

我需要一个 table，其中包含 table 中每一行的复选框。我正在使用 Angular 9.

table 是在一个表单中定义的，我使用 ngFor 在 table 中创建每一行。在 ngFor 中，我遍历一组消息并为每条消息创建一行。

用户应该能够选中复选框并按下按钮以重新发送所选消息。

我编写代码的方式确实会遇到无法解释的错误。

我创建了一个 stackblitz 东西来分享我的代码。 https://stackblitz.com/edit/angular-4qqrzf?file=src%2Fapp%2Fapp.component.ts Stackblitz 中的这段代码有些问题。最烦人的是它一直说它正在加载，但似乎什么也没有发生。我一定是遗漏了什么。

如果我运行我自己系统上的代码，我会得到这个错误：

[Error] ERROR – TypeError: this.form.controls.orders.push is not a function. (In 'this.form.controls.orders.push(control)', 'this.form.controls.orders.push' is undefined) — app.component.ts:36
TypeError: this.form.controls.orders.push is not a function. (In 'this.form.controls.orders.push(control)', 'this.form.controls.orders.push' is undefined) — app.component.ts:36
    defaultErrorLogger (vendor.js:12499)
    handleError (vendor.js:12552)
    run (polyfills.js:136)
    (anonymous function) (vendor.js:45404)
    onInvoke (vendor.js:44403)
    run (polyfills.js:136)
    (anonymous function) (polyfills.js:870)
    onInvokeTask (vendor.js:44381)
    runTask (polyfills.js:180)
    drainMicroTaskQueue (polyfills.js:582)
    promiseReactionJob

我从https://stackblitz.com/edit/angular-stszta?file=src%2Fapp%2Fapp.module.ts复制了大部分代码，但没有出现这个问题。

app.component.ts:

import { Component } from '@angular/core';
import {FormArray, FormBuilder, FormControl, FormGroup} from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  form: FormGroup;
  ordersData = [
    { id: 100, name: 'order 1' },
    { id: 200, name: 'order 2' },
    { id: 300, name: 'order 3' },
    { id: 400, name: 'order 4' }
  ];

  berichten = [
    {messageId: 123},
    {messageId: 234},
    {messageId: 345},
    {messageId: 456},
    {messageId: 567}
  ];

  constructor(private formBuilder: FormBuilder) {
    this.form = this.formBuilder.group({
      orders: []
    });
    this.addCheckboxes();
  }

  private addCheckboxes() {
    this.ordersData.forEach((o, i) => {
      const control = new FormControl(i === 0); // if first item set to true, else false
      (this.form.controls.orders as FormArray).push(control);
    });
  }

  submit() {
    const selectedOrderIds = this.form.value.orders
      .map((v, i) => (v ? this.ordersData[i].id : null))
      .filter(v => v !== null);
    console.log(selectedOrderIds);
  }
}

app.component.html:

  <table>
    <thead>
    <tr>
      <td>
        <b>Selection</b>
      </td>
      <td>
        <b>MessageId</b>
      </td>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let bericht of berichten; let i = index" >
      <td>
        <input type="checkbox" [formControlName]="i">
      </td>
      <td>
        {{bericht.messageId}}
      </td>
    </tr>
    </tbody>
  </table>
</form>

我做错了什么？（在 Stackblitz 和我的代码中）

Answer 1

显示的表格具有以下更改：

//constructor     
orders: new FormArray([])



`//addCheckboxes`
(this.form.get('orders') as FormArray).push(control);

在模板中删除对不存在的控件的绑定

[formControlName]="i"

在 angular 9 中创建多个复选框对我不起作用

creating multiple checkboxes in angular 9 not working for me

javascript

checkbox

angular

formgroups

angular9