“AbstractControl”类型上不存在属性“控件”。ngtsc(2339)答案

【问题标题】：Property 'controls' does not exist on type 'AbstractControl'.ngtsc(2339)“AbstractControl”类型上不存在属性“控件”。ngtsc(2339)
【发布时间】：2022-02-04 21:53:35
【问题描述】：

在我的模板中遇到这个奇怪的问题，请查看是否可以解决。我尝试了一些与此相关的答案，但一无所获。

  ngOnInit(): void {
    this.signUpForm = new FormGroup({
      'userName': new FormControl(null, Validators.required),
      'email': new FormControl(null, [Validators.required, Validators.email]),
      'gender': new FormControl('male'),
      'hobbies': new FormArray([])
    })
  }

  onAddHobby() {
    const control = new FormControl(null, Validators.required);
    (<FormArray>this.signUpForm.get('hobbies')).push(control);
  }

 <div formArrayName="hobbies">
    <h4>your hobbies</h4>
    <button class="btn btn-default" (click)="onAddHobby()">add hobby</button>
    <div
      class="form-group"
      *ngFor="
        let hobbyControl of signUpForm.get('hobbies').controls;
        let i = index
      "
    >
      <input type="text" class="form-control" [formControlName]="i" />
    </div>
  </div>

【问题讨论】：

你试过signUpForm.controls['hobbies']吗？
不，它不工作！

标签： javascript html angular typescript

【解决方案1】：

最简单的解决方法：

let hobbyControl of $any(signUpForm.get('hobbies')).controls;

编译器抱怨是因为signUpForm.get('hobbies') 返回一个abstractControl（它没有控件），但既然你知道这是一个FormArray，你可以使用$any() https://angular.io/guide/template-expression-operators#any-type-cast-function

【讨论】：

谢谢！这是可行的，但这是解决此问题的好方法吗？
你好，@Zerotwelve。我拒绝了您的suggested edit，因为您试图通过添加``` language 来添加代码突出显示，但这会为整个代码块增加额外的空格缩进。您可以改用，或手动删除多余的空格。

【解决方案2】：

这是因为get() 方法返回一个AbstractControl，它没有控件属性。

要解决这个问题，您可以在类中添加一个 getter 以将控件强制转换为 FormArray

get hobbies(): FormArray {
  return this.signUpForm.get('hobbies') as FormArray;
}

然后在模板中使用getter代替：

<div 
  class="form-group"
  *ngFor="
    let hobbyControl of hobbies.controls;
    let i = index
  "
>

干杯

【讨论】：