如何设置在 ng-select angular 8 上选择的第一个选项？

Question

I am generating multiple dropdowns from a nested array. I wanted to first option selected for all dropdowns. Here is my code on html

<ng-container *ngFor="let siz of product.attributes">
     <ng-select autocomplete="attributes" formControlName="attributes" [ngClass]="{ 'is-invalid': submitted && val.get('attributes').errors }" class="mt-2" bindValue="{{ siz }}" bindLabel="{{ siz }}" [items]="siz.value" placeholder="Select {{ siz.name }}" (change)="sizeChange($event, siz.name)"></ng-select>
</ng-container>

Other everything working fine, I just need to first option selected by default.

Here is attributes array

Answer 1

Get the value before everything in onInit

selected = product.attributes.map(x => x.value.map(y => y)[0])[0];

Use method 1 while initializing your form

Method 1:

//fb is formbuilder
this.form = fb.group({
   attributes: [selected, Vaidators.required] // selected is the default value
});

Method 2: After form is initialized

this.form.controls['attributes'].setValue(selected);

.ts file

<ng-select formControlName="attributes">