Angular 4：FormArray给出了“ERROR TypeError：无法读取未定义的属性'id'

问题描述：

我有一个要求，我必须在运行时在我的页面上添加checkboes。我正在使用Angular Reactive Forms的方法。我可以在浏览器控制台中看到以下错误。复选框被错误后添加虽然Angular 4：FormArray给出了“ERROR TypeError：无法读取未定义的属性'id'

ERROR TypeError: Cannot read property 'id' of undefined

FormGroup声明

this.licenseTypeForm = this.fb.group({ 
     name: ['', Validators.required], 
     description: '', 
     enabled: true, 
     deleted: true, 
     permissions: this.fb.array([]) 
    })

加载这样

//Get Permissions 
getLicensePermission(): void { 
    this.licenseTypeService.getPermissions(this.licenseType.id) 
     .subscribe(
     (permissions: IPermissions[]) => this.onPermissionsRetrieved(permissions), 
     (error: any) => this.errorMessage = <any>error 
     ); 
} 

onPermissionsRetrieved(permissions: IPermissions[]): void { 
    if (this.permissionsArray == null) 
     this.permissionsArray = permissions; 

    var items = this.licenseTypeForm.get('permissions') as FormArray; 
    for (let permission of permissions) { 
     items.push(this.buildPermission(permission.code, permission.selected, permission.name)); 
    } 
} 

buildPermission(code: string, selected: boolean, name: string): FormGroup { 
    return this.fb.group({ 
     code: code, 
     selected: selected, 
     name: name 
    }); 
}

Html代码以显示复选框的权限是

<div class="form-group row"> 
      <label class="col-md-2 control-label">Permissions</label> 
      <!-- mark the formArray first --> 
      <div formArrayName="permissions" class="col-md-4 "> 
       <!-- here add the formGroupName, which is the index --> 
       <div *ngFor="let permission of licenseTypeForm.get('permissions').controls; let i=index " [formGroupName]="i" class="checkbox checkbox-circle checkbox-info"> 
        <input formControlName="selected" type="checkbox" id="{{'checkbox'+i}}" /> 
        <!-- use 'value' in between, since the 'name' is inside that object --> 
        <label attr.for="{{'checkbox'+i}}">{{permission?.value.name}}</label> 
       </div> 
      </div> 
     </div>

有什么建议我在这里做错了吗？

我猜'licenseType'是异步获取的。所以当你调用'this.licenseTypeService.getPermissions（this.licenseType.id）'时，它是'undefined'。 – n00dl3

我没有为此指定任何内容，但数据在错误之后加载 –

答

我通过在声明中初始化licenseType类来解决了这个问题。最初的代码是

licenseType: ILicenseType;

，我把它改成

licenseType: ILicenseType = new ILicenseType();

这Link帮我将其指向这个方向。

Angular 4：FormArray给出了“ERROR TypeError：无法读取未定义的属性'id'

相关推荐