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

Question

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

简单来说Html很简单https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_option_selected

但是当Angular进来的时候一切都开始变得凌乱了!!

这是我的问题的现场演示

https://stackblitz.com/edit/angular-jrvpus?embed=1&file=src/app/app.component.html

Answer 1

<select class="form-control" [(ngModel)]="ItemId" (change)="DoSomeThingMethods()"
                    name="itemsfromServer" required>
                <option *ngFor="let item of itemsfromServer" value="{{ item.ItemId }}" [selected]="item.ItemId == 0 ">{{ item.type }} {{ item.ItemId }}</option>
            </select>

现在在组件中设置您的 [(ngModel)] 值。

如果将 ItemId 设置为 0。 {ItemId : 0 ,selected : true ,type:"Type default"} 将在下拉列表中被选中。

Answer 2

您可以通过 ngModel 进行设置。

考虑您的模板 HTML；

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

还有你component.ts;

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"},
]

现在应该默认选择type : t5。

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

Set selected item in Dropdown List

html-select

angular