Angular 4: FormArray gibt "ERROR TypeError: Kann Eigenschaft 'ID' von undefined nicht lesen"

Question

Ich habe eine Anforderung, wo ich zur Laufzeit auf meiner Seite Checkboes hinzufügen muss. Ich benutze Angular Reactive Forms Ansatz. Ich kann einen folgenden Fehler in der Browserkonsole sehen. Kontrollkästchen werden nach den Fehlern hinzugefügt obwohl

ERROR TypeError: Cannot read property 'id' of undefined

FormGroup Erklärung

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

die Berechtigungen wie dieser Laden

//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-Code das Kontrollkästchen angezeigt ist

<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> 

irgendwelche Vorschläge, was ich hier falsch mache?

Answer 1

Ich behob das Problem durch die Initialisierung der Klasse licenseType während der Deklaration. Zunächst wird der Code

licenseType: ILicenseType; 

und ich änderte es

licenseType: ILicenseType = new ILicenseType(); 

Diese Link half mir es zu dieser Richtung.