迹忆客 专注技术分享

select 是一个 HTML 标记，其中包含 n 个包含 value 属性的选项子标记。

如果用户没有选择任何特定的定义值，本教程指南将提供如何从 AngularJs 中的 TypeScript 中选择选择默认选项值。

在 AngularJS 中通过 Value 属性选择默认值

我们可以通过在数组括号内设置 value 属性并为其分配一个硬涂层值来为 select 标签定义一个默认值。

select 标签的默认 value 只能从选项值中分配。这个值也可以使用在 change 事件中调用的 valueChanging 函数来处理。

传递给 valueChanging 函数的参数可以指定一个默认选项。

<select  class='form-handler'
        (change)="valueChanging($event)" [value]='69'>
  <option value='68'>68</option>
  <option value='69'>69</option>
  <option value='70'>70</option>
</select>

输出：

默认情况下，选择默认的选择选项。如果你记得只将值作为默认选项放在 select 选项值中，那将会有所帮助。

通过 AngularJS 中的 ngModel 选择器选择默认值

我们可以使用 ngModel 选择器，AngularJs 中的一个指令，它绑定 input、select、textarea，并将 user 值保存在变量中。

select 标签包含带有 selectValue 属性的 ngModel 指令，并且在 app.component.ts 文件中，它被分配了一个与 option 标签内相同的默认值。

app.component.html：

<select [(ngModel)]='selectValue' class='form-control'>
  <option value='47'>47</option>
  <option value='46'>46</option>
  <option value='45'>45</option>
</select>

app.component.ts：

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  selectValue:number = 47;
}

输出：