Angular 6+ 材料框架选择提供的值

Question

I'm trying to use mat-select with backend based search, but there is a problem when reloading data. I'm using object like {value: 1, name: 'aloha'} to store and display value. And I want to pass .value as an value in option. Currently I'm stuck at passing whole value and using it to create option with this data to have display value in select. Is there a better way to do this? And second question, I'm using this select in formcontrol. How do I set initial value when there are no options in select but I need to have initial provided selected option. Like I have on backend [cat, dog, elephant] and milion other values but I need to preselect cat for instance. Like new FormControl(cat). I could live with passing FormControl({value: 5, display: cat}) but is there a way to get control.value of only value from this object? I dont want it to return whole object ({name, value})

Answer 1

First question.

<mat-select placeholder="Placeholder" formControlName="yourForm">
    <mat-option *ngFor="let x of yourArray" [value]="x.value">
        {{ x.name }}
    </mat-option>
</mat-select>

You can use [value] to save its value and use interpolation to display desired value (ie {{x.name}} ).

Second question.

Above set-up takes care of #2. You can now use FormControl({value: 5, display: cat})