使用 md-select 和 Material Design for Angular 选择的选项答案

【问题标题】：Selected options with md-select and Material Design for Angular使用 md-select 和 Material Design for Angular 选择的选项
【发布时间】：2017-08-01 17:45:47
【问题描述】：

当使用Material Design for Angular 时，如何在Select component 上设置默认（即选定）选项？

<md-select placeholder="Angular2 Material">
  <md-option>One</md-option>
  <md-option selected>Two</md-option>
  <md-option ng-selected="true">Three</md-option>
</md-select>

搜索 SO 将我带到：

ng-selected="true" 和 selected 属性我都试过了，都不管用。

Plunker：https://plnkr.co/edit/EyC6wpUpgZEihlGclDUU?p=preview

明确地说，我不使用Material Design for AngularJS Apps。我正在使用Material Design for Angular。

【问题讨论】：

转到material.angular.io/components/component/select。阅读标题“获取和设置选择值”部分。
@JBNizet 这是假设我的表单元素后面有一个组件。虽然我的 Plunker 确实有这个，但我可以从标记中设置一个默认值以避免每个选择元素都有一个组件吗？
你总是有一个组件。所有角度视图都是组件的视图。每个选择都不需要一个组件。
@JBNizet 我确实有组件 - 但它是整个表单的父组件。所以我应该在包含表单的组件中设置默认值？
是的，这就是你应该做的。表单通常用于提供有关对象的信息（例如，用户：姓名、名字、性别等）。该对象是表单的模型。 ngModel 允许将表单小部件（如您的选择）绑定到模型的字段（如您的用户对象）。所以初始化模型（即用户对象），表单字段会显示用户的信息。这基本上就是 Angular 的全部意义所在。

标签： angular angular-material2

【解决方案1】：

你应该有变量来存储选定的值

export class SelectOverviewExample {
  myValue = 'Two';
}

然后确保md-option 具有value 属性。通过ngModel绑定选中的值。

<md-select placeholder="Angular2 Material" [(ngModel)]="myValue">
  <md-option>One</md-option>
  <md-option value="Two">Two</md-option>
  <md-option>Three</md-option>
</md-select>

【讨论】：