Angular2下拉列表默认显示指定值问题咨询

嘿，我来帮你搞定这个下拉框默认选中的问题！

你当前代码里的问题很明确：你把selectedType初始赋值成了整个jobTypes数组，这就导致下拉框默认“选中”了全部选项。下拉框的选中值应该是单个元素，而不是整个数组，咱们调整一下就行：

1. 修正组件中的初始选中值 #

把selectedType的初始值改成你想要默认选中的单个选项就行。推荐用this.jobTypes[0]来绑定，这样如果后续数组元素顺序调整，默认选中的还是第一个选项；当然你也可以直接写死"Job 1"。

修改后的组件代码：

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

@Component({ 
  selector:'job-container', 
  templateUrl: './job.container.html' 
}) 
export class JobContainer { 
  public jobTypes:Array<string> = ["Job 1", "Job 2", "Job 3"]; 
  // 把初始值改成单个选项，这里用数组第一个元素更灵活
  selectedType = this.jobTypes[0]; 

  onSelect(job: string): void {
    this.selectedType = job;
    // 保留你原来的业务逻辑即可
  }
}

2. 确保模板（HTML）的绑定正确 #

你的模板需要用[(ngModel)]双向绑定选中值，同时每个<option>要对应数组里的单个元素。示例模板代码如下：

<select [(ngModel)]="selectedType" (change)="onSelect(selectedType)">
  <option *ngFor="let job of jobTypes" [value]="job">{{job}}</option>
</select>

原理说明 #

Angular的ngModel会自动匹配绑定变量的值和下拉框的选项值。当你把selectedType初始化为"Job 1"（或者数组第一个元素），页面加载时下拉框就会自动选中对应的选项，完美解决你的需求～

内容的提问来源于stack exchange，提问作者L.C