Multi-select error this.value is undefined

Question

I am trying to use the new multi-select component in Kendo UI for Angular 2 but "this.value is undefined" error is thrown in Firebug when the widget is launched.

<kendo-multiselect name="watchbill" [data]="watchbills" [(ngModel)]="selectedWatchbills" [textField]="'name'" [valueField]="'id'"></kendo-multiselect>

selectedWatchbills: Watchbill[];
watchbills: Watchbill[];
ngOnInit() {
        this.shipDataService.getWatchbills(this.startTime, this.endTime).subscribe(
        data => this.watchbills = data
    );
}


export interface Watchbill {
    id: string,
    name: string
}

Answer 1

This is probably an issue with that the view is rendered before data has arrived, so try and put an ngIf like so:

<kendo-multiselect *ngIf="watchbills" name="watchbill" [data]="watchbills" 
     [(ngModel)]="selectedWatchbills" [textField]="'name'" [valueField]="'id'"></kendo-multiselect>

which waits for that there will be values in the array watchbills before rendering anything that is wrapped inside that tag.