Angular 4 : FormArray gives "ERROR TypeError: Cannot read property 'id' of undefined"

Question

我有一个要求，我必须在运行时在我的页面上添加复选框。我正在使用 Angular Reactive Forms 方法。我可以在浏览器控制台中看到以下错误。虽然在错误之后添加了复选框

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>

对我做错了什么有什么建议吗？

Answer 1

我通过在声明期间初始化 licenseType class 解决了这个问题。最初的代码是

licenseType: ILicenseType;

我把它改成了

licenseType: ILicenseType = new ILicenseType();

这个Link帮我把它指向了这个方向。

Angular 4 : FormArray gives "ERROR TypeError: Cannot read property 'id' of undefined"

Angular 4 : FormArray gives "ERROR TypeError: Cannot read property 'id' of undefined"

angular

angular-reactive-forms