Angular 错误-无法读取null的属性“controls”（被动形式-添加FormArray）

我正面临一个错误，无法找出显示此错误的原因，需要一些帮助：

无法读取null的属性“controls”

下面是我的代码TS，它没有通过函数粘贴整个代码，我在函数中初始化表单，而表单实际上正在捕获错误：

ngOnInit() {
 this.route.params
 .subscribe(
 (params: Params) => {
     this.id = +params['id'];
     this.editMode = params['id'] != null;
     this.initForm();});
 }



quesControl() {
   line 79:  console.log(this.constructor.name);
   line 80: console.log(this.questionaireForm.get('steerings'));
    return (<FormArray>this.questionaireForm.get('steerings')).controls;
}


private initForm() {
    let questionaireName     = '';
    let questionaireTitle    = '';
    let questionaireType     = '';
    let questionaireLevel    = '';
    let questionaireGroup    = '';
    const questionaireSteerings = new FormArray([]);

    if (this.editMode) {
      this.questionaireService.getQuestionaireById(this.id).subscribe(
        (questionaireRec: Questionaire) => {
          questionaireName  = questionaireRec.name;
          questionaireTitle = questionaireRec.title;
          questionaireType  = questionaireRec.type;
          questionaireLevel = questionaireRec.level;
          questionaireGroup = questionaireRec.group;
          this.questionaireForm = new FormGroup ({
            'name'    : new FormControl (questionaireName,  Validators.required),
            'title'   : new FormControl (questionaireTitle, Validators.required),
            'type'    : new FormControl (questionaireType,  Validators.required),
            'level'   : new FormControl (questionaireLevel, Validators.required),
            'group'   : new FormControl (questionaireGroup, Validators.required)
          });
          if (questionaireRec['steerings']) {
            for (const steeringCtrl of questionaireRec.steerings) {
              line 110: console.log(steeringCtrl);
              questionaireSteerings.push(
               new FormGroup({
                 'proposal': new FormControl (steeringCtrl.proposal, Validators.required),
                 'label': new FormControl (steeringCtrl.label, Validators.required),
                 'product': new FormControl (steeringCtrl.product, Validators.required)
               })
              );
            }
          }
        }
      );
    }
      this.questionaireForm = new FormGroup ({
        'name'    : new FormControl (questionaireName,  Validators.required),
        'title'   : new FormControl (questionaireTitle, Validators.required),
        'type'    : new FormControl (questionaireType,  Validators.required),
        'level'   : new FormControl (questionaireLevel, Validators.required),
        'group'   : new FormControl (questionaireGroup, Validators.required),
        'steerings': questionaireSteerings
      });
  }

以及HTML代码：

<div class="col-xs-12" formArrayName = "steerings">
 <div class="row" *ngFor = "let quesCtrl of quesControl(); let i = index" [formGroupName] = "i">

 <div class="col-xs-4">
  <label for="proposal">Proposal Type</label>
  <select class="form-control" id="proposal" formControlName="proposal" #proposal>
  <option value="">Select</option>
  <option value="Proposal">Proposal</option>
  <option value="ndg">NDG</option>
  <option value="credit">Credit Line</option> 
  <option value="collateral">Collateral</option>
  <option value="asset">Asset</option> 
 </select>
 </div>

 <div class="col-xs-4">
 <label for="Label">Label</label>
 <select class="form-control" id="label" formControlName="label" #label>
 <option value="">Select</option>
 <option value="equal">Equal</option>
 <option value="notEqual">Not equal</option>
 <option value="greater">Greater than</option>
 <option value="less">Less than</option>
 <option value="con">Contained in a list</option>
 <option value="ntCon">Not Contained in a list</option>
 </select> 
 </div>

 <div class="col-xs-4">
 <label for="name">PRODUCT</label>
 <input type="text" class="form-control" id="product" formControlName="product" #product>
 </div>

 </div>
 </div>

提前谢谢

问候

---

阿德南

代码的重要部分似乎在这里：

quesControl() {
    return (<FormArray>this.questionaireForm.get('steerings')).controls;
}

下面是同一方法的快速调试版本，它将帮助您解决问题

quesControl() {
    // Check this logs the class name, otherwise you've lost the context of this
    console.log(this.constructor.name);

    // Check what you get back here... is it null, or of the wrong type
    console.log(this.questionaireForm.get('steerings'));

    return (<FormArray>this.questionaireForm.get('steerings')).controls;
}

---

如果需要深入挖掘，还可以使用typeof来记录变量的类型。

将有效的返回类型添加到function@arvind关于哪个函数抱歉我不懂？谢谢你的建议我已经尝试过了..这就是发生的情况表单数组接受空值不知道为什么..你能帮我一下吗..我已经添加了日志的图像..你能找出问题所在吗？你知道为什么它调用quesControl三次吗？在第三次调用中，this.questionAirForm.get'steerings'为null-但前两次调用显示它不是null。嗨，谢谢你的帮助，我发现了问题。问题是，在表单组中，我没有传递steerings表单控件，因此在订阅终止后它变为null。

quesControl() {
    // Check this logs the class name, otherwise you've lost the context of this
    console.log(this.constructor.name);

    // Check what you get back here... is it null, or of the wrong type
    console.log(this.questionaireForm.get('steerings'));

    return (<FormArray>this.questionaireForm.get('steerings')).controls;
}