在Angular.JS中可以使用数组或对象创建一个下拉列表选项。关于Angular.js中select的基础相信大家应该都已经了解了，那么下面这篇文章主要给大家介绍了Angular2中select用法之设置默认值与事件的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
在Angular2中，使用`select`元素创建下拉列表是一个常见的任务，特别是在构建表单时。这篇文章主要讨论了如何在Angular2中设置`select`的默认值以及如何处理与`select`相关的事件。
我们来看一下如何设置`select`的默认值。在Angular2中，你可以使用双向数据绑定`[(ngModel)]`来实现这一目标。假设你有一个名为`students`的数组，其中包含小明、小红和小黑的名字，你可以创建一个`select`元素，然后将`ngModel`绑定到一个名为`student`的变量。如果你想要`select`显示“请选择”作为默认值，可以将`student`变量初始化为空字符串：
```html
<select [(ngModel)]="student">
<option value="">请选择</option>
<option *ngFor="let item of students" [value]="item">{{item}}</option>
</select>
```
在这个例子中，`[value]`指令用于将`item`的值绑定到`option`的`value`属性，确保在`student`变量改变时，相应的`option`会被选中。
如果你想让默认值是数组中的某个具体值，例如小明，只需将`student`变量初始化为`'xiaoming'`：
```typescript
let students: string[] = ['xiaoming', 'xiaohong', 'xiaohei'];
let student: string = 'xiaoming';
```
接下来，我们讨论如何绑定`select`的事件。在Angular2中，可以使用`ngModelChange`事件来监听`select`值的变化。当你需要在选择项改变时执行某些操作，如更新其他字段或者调用服务，你可以这样做：
```html
<select [ngModel]="student" (ngModelChange)="student = $event; setInfo()">
<option value="">请选择</option>
<option *ngFor="let item of students" [value]="item">{{item}}</option>
</select>
{{info}}
```
在上面的代码中，`setInfo()`方法会在`select`的值改变时被调用，`$event`参数包含了当前选择的值。`ngModelChange`事件提供了一个从视图到模型的单向数据绑定。
注意，`ngModel`和`ngModelChange`配合使用时，`ngModel`负责保持模型和视图之间的同步，而`ngModelChange`则监听并处理变化。此外，`[(ngModel)]`语法实际上是`ngModel`输入属性和`ngModelChange`输出属性的简写。
Angular2中的`select`组件提供了灵活的方式来设置默认值和响应用户的选择。通过使用双向数据绑定和事件监听，我们可以轻松地实现动态表单和复杂的用户交互。对于更复杂的情况，例如需要绑定JSON对象，可能需要额外的处理，但基本原理仍然是使用`ngModel`和事件绑定。理解这些基本概念对于开发Angular2应用至关重要。
