输入“AbstractControl | null' 不可分配给类型 'NgIterable<any> |空 |未定义'

Question

我的component.ts代码是

forms = new FormGroup({
    topics: new FormArray([]),
  });

  addTopic(topic: HTMLInputElement) {
    (this.refForm as FormArray).push(new FormControl(topic.value));
    // topic.value = '';
  }

  get refForm() {
    return this.forms.get('topics');
  }

并且 .html 文件具有以下代码。

<form [formGroup]="forms">
  <input
    type="text"
    class="form-control"
    (keyup.enter)="addTopic(topic)"
    #topic
  />
  <ul class="list-group">
    <li *ngFor="let topic of forms.get('topics')">
      class="list-group-item">
      {{ topic.value }}
    </li>
  </ul>
</form>

我试图找到并解决问题，但没有解决方案或答案。

Answer 1

您需要迭代控件，但要将

AbstractControl

的实例或可能的

null

值传递给

ngFor

循环。

我猜你想在你的

FormArray

中传递控件数组。

您已经有了一个可以通过正确的类型来增强的 get 助手：

get refForm() {
  return this.forms.get('topics') as FormArray;
                                  ^^^^^^^^^^^^
}

使用上面的代码你可以更正你的html

*ngFor="let topic of refForm.controls"

Answer 2

我刚刚通过将

form.get

更改为

[control]="this.form.controls['reply']"

解决了这个问题

Answer 3

更换线路

与

希望能解决问题