Angular 自动分配下拉

Question

I have a drop down angular select tag here. The drop down wont be selected when value being assign.

<select [(ngModel)]="controlType" #ctrl="ngModel" class="form-control" [ngModelOptions]="{standalone: true}">
    <option [value]="undefined" selected>SILA PILIH</option>
    <option *ngFor="let alertControl of alertControlList" [ngValue]="alertControl">{{ alertControl?.desc }}
    </option>
</select>

controlType value from DB

{
    "errorCode": null,
    "errorMessage": null,
    "id": "b9e86e1a-cabc-11e8-9257-31ce15c52e16",
    "createdBy": "a6ef4d81-744e-49e7-9e1d-ab74a14935d6",
    "lastModifiedBy": "a6ef4d81-744e-49e7-9e1d-ab74a14935d6",
    "createdDate": 1538977256000,
    "lastModifiedDate": 1538977256000,
    "deleted": null,
    "active": true,
    "version": 0,
    "code": "1",
    "desc": "why"
}

alertControlList value

[{
    "code": "2",
    "version": "0",
    "desc": "why",
    "id": "b9e8bc3b-cabc-11e8-9257-31ce15c52e16",
    "HEX(id)": "B9E8BC3BCABC11E8925731CE15C52E16"
}, {
    "code": "1",
    "version": "0",
    "desc": "why",
    "id": "b9e86e1a-cabc-11e8-9257-31ce15c52e16",
    "HEX(id)": "B9E86E1ACABC11E8925731CE15C52E16"
}]

It's only work when i do a object mapping here. Any other simpler solution?

for (let int i = 0; i < alertControlList.length; i++) {
    if (alertControlList[i].code === dropdown.code) {
        console.log('do MATCH' + i + ' code' + dropdown.code);
        controlType = alertControlList[i];
    }
}

Answer 1

use [selected]="alertControl.code === dropdown.code" instead.

Answer 2

This doesn't work directly since you are setting your option value to an object and the ngModel does not match that value so it will not show as selected. Instead. You also seem to be using both ngModel with two-way binding and ngModel with ngForm . Use either one. If you are using ngForm to get the form values, you can set the value on select using value and change the option value to a unique property within alertControl like code .

<select #ctrl="ngModel" [value]="controlType.code" class="form-control">
    <option *ngFor="let alertControl of alertControlList" [value]="alertControl.code">{{ alertControl?.desc }}</option>
</select>