Установить выбранный элемент в выпадающем списке

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

Вы можете установить его через 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 должен быть выбран по умолчанию.

Answer 2

<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"} будет выбрано в выпадающем списке.