Angular 5及以下版本ngFor循环下拉列表默认选中值设置问题

嘿，我来帮你搞定这个默认选中的问题～

你现在遇到的核心问题是：当使用[(ngModel)]双向绑定的时候，Angular会根据绑定的变量值来全权接管下拉框的选中状态，你手动设置的[selected]属性会被它直接忽略掉，这就是为啥你的设置没生效啦！

下面给你两种最靠谱的解决方式：

方法一：在组件类中初始化绑定变量（推荐） #

这是最符合Angular表单设计逻辑的做法——直接把Schedule.Branch的初始值设置为DataList第一个元素的Code。

在你的组件.ts文件里，找到初始化数据的地方（比如ngOnInit钩子），添加这段代码：

ngOnInit() {
  // 确保DataList已经加载完成且不为空
  if (this.DataList && this.DataList.length > 0) {
    this.Schedule.Branch = this.DataList[0].Code;
  }
}

然后模板里就可以删掉多余的[selected]属性，简化成这样：

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

方法二：使用[ngValue]绑定值（可选） #

如果你更习惯在模板里处理，也可以用[ngValue]替代value（两者的区别是ngValue支持绑定复杂对象，value只能绑定字符串），但核心还是要确保Schedule.Branch的初始值正确：

模板代码：

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

同样需要在组件类里初始化Schedule.Branch = this.DataList[0].Code，这样下拉框就会默认选中第一个选项啦。

内容的提问来源于stack exchange，提问作者Tanwer