角度2 - 如何设置<选择>默认选择的选项

Question

我的模板是这样的

<select>
  <option>AM</option>
  <option>PM</option>
</select>

如何设置默认选择的AM选项？

Answer 1

<select [(ngModel)]="defaultValue">
  <option>AM</option>
  <option>PM</option>
</select>

export class MyComponent {
  defaultValue = 'PM';
}

通常情况就是如此

<select [(ngModel)]="defaultValue">
  <option *ngFor="let value of values" [ngValue]="value">{{value}}</option>
</select>

export class MyComponent {
  values = ['AM', 'PM'];
  defaultValue = this.values[1];
}

提示对于非字符串值,请使用`[ngValue] ="..."

<select [(ngModel)]="defaultValue">
  <option [ngValue]="values[0]">AM</option>
  <option [ngValue]="values[2]">PM</option>
</select>

Answer 2

对于模板驱动的表单,我这样做并获得了默认选择.

<select [(ngModel)]="defaultOption" name="identification">
                <option [value]=null>Select</option>
                <option *ngFor="let option of identification" [value]="option.id"> {{ option.name }} </option>
              </select>

并在component.ts文件中,

   identification = [
    { id: 1, name: 'Passport'},
    { id: 2, name: 'Adhaar'},
    { id: 3, name: 'Driver\'s license'},
    ];
    defaultOption = null;

在加载时,我们可以选择Select作为默认值.

Answer 3

我不知道为什么这么久的答案.

简答:

在选项标签中使用[selected] ="isSelected"!

方案:

<select>
  <option [selected]="isSelected">AM</option>
  <option>PM</option>
</select>

资源:

https://medium.com/@phismonster/set-default-value-for-select-in-angular-2-27f0da413935

Answer 4

如果您不想动态执行任何操作，旧的纯 HTML 方式仅适用于 Angular2：

<select>
  <option selected>AM</option>
  <option>PM</option>
</select>

但以下是 Angular 2 的方式，它允许您动态分配选定的值，这可能是实际和常见的用例：（您需要导入FormsModule）

<select [(ngModel)]='selectedValue'>
  <option value='AM'>AM</option>
  <option value='PM'>PM</option>
</select>

在你的组件类中

selectedValue = 'AM'; // You may assign 'AM or 'PM' dynamically here

以下链接可能有用：

https://angular.io/api/forms/NgSelectOption

https://angular.io/api/forms/NgModel

上面提到的 Angular 2 方法是模板驱动表单方法。还有另一种方法可以做到这一点，即反应式表单方法，如下所述：（您需要导入ReactiveFormsModule）

<select [formControl]='control'>
  <option>AM</option>
  <option>PM</option>
  </select> 

在你的组件类中

control = new FormControl('AM');

以下链接可能有用：

https://angular.io/api/forms/FormControlDirective