Set value programmatically ng-select - angular8

Question

[items] : {id: number, label: string }[]
[bindValue]: id
[bindLabel]: label
([ngModel)] : number[]
I want to bind default data but there is no label.(picture)
And if i change bindValue to label then these square will show up the label
Manually selecting works fine.

Answer 1

i add this line of code to add default selected items
this.heroForm.get('selectedCitiesIds').patchValue([1,2]);
check this example
<form [formGroup]="heroForm">
<div class="form-group">
<label for="state">City</label>
<ng-select *ngIf="isCitiesControlVisible"
[items]="cities"
bindLabel="name"
bindValue="id"
labelForId="state"
[multiple]="true"
placeholder="Select cities"
clearAllText="Clear"
formControlName="selectedCitiesIds">
</ng-select>
<br>
<button (click)="toggleCitiesControl()" class="btn btn-sm btn-secondary">Show/Hide</button>
<button (click)="clearCities()" class="btn btn-sm btn-secondary">Clear</button>
</div>
</form>
and
import { Component, OnInit } from '#angular/core';
import { FormBuilder, FormGroup } from '#angular/forms';
#Component({
selector: 'forms-multi-select-example',
templateUrl: './forms-multi-select-example.component.html',
styleUrls: ['./forms-multi-select-example.component.scss']
})
export class FormsMultiSelectExampleComponent implements OnInit {
heroForm: FormGroup;
isCitiesControlVisible = true;
cities: any[] = [
{ id: 1, name: 'Vilnius' },
{ id: 2, name: 'Kaunas' },
{ id: 3, name: 'Pavilnys (Disabled)', disabled: true },
{ id: 4, name: 'Pabradė' },
];
constructor(private fb: FormBuilder) {
}
ngOnInit() {
this.heroForm = this.fb.group({
selectedCitiesIds: []
});
this.heroForm.get('selectedCitiesIds').patchValue([1,2]);
}
toggleCitiesControl() {
this.isCitiesControlVisible = !this.isCitiesControlVisible;
}
clearCities() {
this.heroForm.get('selectedCitiesIds').patchValue([]);
}
}