角度自动分配下拉菜单答案

【问题标题】：Angular auto assign drop down角度自动分配下拉菜单
【发布时间】：2019-09-27 15:38:26
【问题描述】：

我在这里有一个下拉角度选择标签。赋值时不会选择下拉列表。

<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 来自 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 值

[{
    "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"
}]

只有在我在这里进行对象映射时才有效。还有其他更简单的解决方案吗？

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];
    }
}

【问题讨论】：

标签： angular list dropdown

【解决方案1】：

请改用[selected]="alertControl.code === dropdown.code"。

【讨论】：

我可以从 html 端做些什么？所以它会选择值？

【解决方案2】：

这不能直接工作，因为您将option 值设置为一个对象，而ngModel 与该值不匹配，因此它不会显示为选中状态。反而。您似乎也同时使用ngModel 和双向绑定和ngModel 和ngForm。使用任何一个。如果您使用ngForm 获取表单值，则可以使用value 设置select 上的值，并将option 值更改为alertControl 中的唯一属性，例如code。

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

【讨论】：