Angular 在下拉列表中设置所选项目

简单的问题,， 如何在下拉列表中设置所选项目

在纯Html中是很容易的

但是当我进来的时候，一切都开始变得一团糟

这是我问题的现场演示

{{item.type}{{item.ItemId}

现在在组件中设置

[（ngModel）]

值

如果将

ItemId

设置为

0

。

---

{ItemId:0，selected:true，type:“type default”}

将在下拉列表中选择。

您可以通过ngModel进行设置

考虑一下你的HTML模板

<select [(ngModel)]="id" (change)="change()" name="item" required>
    <option *ngFor="let item of items" value="{{ item.id }}">
        {{ item.type }}
    </option>
</select>

现在，如果项目集合类似

[
    {type:"t1", id:"1"},
    {type:"t2", id:"2"},
    {type:"t3", id:"3"},
    {type:"t4", id:"4"},
    {type:"t5", id:"5"},
    {type:"t6", id:"6"},
    {type:"t7", id:"7"},
]

---

现在，默认情况下应选择

类型：t5

。

您只需设置

[（ngModel）]

值，它就可以工作。请删除双向绑定设置ngmodule值，但站点设置时间限制为接受它5分钟后

this.id = 5; //or whatever

[
    {type:"t1", id:"1"},
    {type:"t2", id:"2"},
    {type:"t3", id:"3"},
    {type:"t4", id:"4"},
    {type:"t5", id:"5"},
    {type:"t6", id:"6"},
    {type:"t7", id:"7"},
]