Javascript 在angular 9中创建多个复选框不适用于我

我需要一个包含表中每一行复选框的表。 我用的是角度9

表是在表单中定义的，我使用ngFor创建表中的每一行。 在ngFor中，我在一组消息上循环，并为每条消息创建一行

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

我写代码的方式确实会出现无法解释的错误

我创建了一个stackblitz东西来分享我的代码。 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

我从没有出现此问题的地方复制了大部分代码

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>

挑选
消息ID
{{bericht.messageId}

---

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

表格中显示了这些更改：

//constructor     
orders: new FormArray([])



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

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

[formControlName]="i"

---

您能在问题中包含相关代码吗？stackblitz不起作用，添加了更改加载代码。修正了stackBlitz，谢谢。这很有效。如果可能的话，请您解释一下原因：（this.form.get（'orders'）作为FormArray.push（control）；works和my：（this.form.controls.orders as FormArray）。push（control）；不？我的示例是从StackBlitz上的工作解决方案复制的。this.form.controls是FormControls的数组，没有属性orders。this.form.get（'orders'）在表单中请求名为'orders'的控件（可以是组/控件/formarray）