Установка выбранного значения для DropDown List в ngFor Anular 5

Question

Ниже приведен мой код Angular5

<div class="section">
        <h6 style="font-weight:bold">Select a Branch</h6>
        <select [(ngModel)]='Schedule.Branch'>
            <option *ngFor="let item of DataList;let i = index" value="{{item.Code}}" [selected]="i == 0">
              {{item.Name}}
            </option>
          </select>
      </div>

Я увидел сообщение о стекле потока, чтобы установить выбранную опцию в Angular, то же самое я попытался в своем коде как

[selected]="i == 0 "

Если яравно 0 означает, что должен быть выбран первый параметр

i определен в цикле ngFor

*ngFor="let item of BranchList;let i = index"

, но он не работает, я также пытался

[selected]="item.index == 0 "

Но неработать, как я могу установить первый вариант как выбранный?

Answer 1

[(ngModel)]='schedule.branch' и [selected]="i == 0" оба конфликтуют.Вы используете только один в соответствии с вашим предпочтением.

HTML

Угловой выпадающий список

<div class="section">
    <h6 style="font-weight:bold">Select a Branch</h6>
    <select>
      <option *ngFor="let item of this.dataList;let i = index" value="{{item.code}}" [selected]="i == 0">
        {{item.name}}
      </option>
    </select>
</div>

Компонент

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular 5';
  dataList: Array<any> = [];
  schedule: { branch: '' };

  constructor() {
    this.dataList = [
      { code: 1, name: "shohel" },
      { code: 2, name: "rana" },
      { code: 3, name: "shipon" }
    ]
  }
}

Демо

Answer 2

Нет необходимости связываться с ngModel, если вы используете selected, код должен быть таким:

<div class="section">
  <h6 style="font-weight:bold">Select a Branch</h6>
  <select >
      <option *ngFor="let item of this.dataList;let i = index" value="{{item.code}}" [selected]="i == 2">
        {{item.name}}
      </option>
    </select>
</div>

Рабочий пример