角材料：垫选择不选择默认

Question

我有一个 mat-select，其中选项是数组中定义的所有对象。我正在尝试将值设置为默认选项之一，但是在页面呈现时它处于选中状态。

我的打字稿文件包含：

   public options2 = [
    {"id": 1, "name": "a"},
    {"id": 2, "name": "b"}
  ]
  public selected2 = this.options2[1].id;

我的 HTML 文件包含：

   <div>
    <mat-select
        [(value)]="selected2">
      <mat-option
          *ngFor="let option of options2"
          value="{{ option.id }}">
        {{ option.name }}
      </mat-option>
    </mat-select>
  </div>

I have tried setting selected2 and the value in mat-option to both the object and its id, and have tried using both [(value)] and [(ngModel)] 在 mat-select ，但没有一个工作。

我正在使用材料版本 2.0.0-beta.10

原文由 William Moore 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

对模板中的值使用绑定。

 value="{{ option.id }}"

应该

[value]="option.id"

并在您选择的值中使用 ngModel 而不是 value 。

 <mat-select [(value)]="selected2">

应该

<mat-select [(ngModel)]="selected2">

完整代码：

 <div>
  <mat-select [(ngModel)]="selected2">
    <mat-option *ngFor="let option of options2" [value]="option.id">{{ option.name }}</mat-option>
  </mat-select>
</div>

---

附带说明，从 2.0.0-beta.12 版开始， 材质选择 现在接受 mat-form-field 元素作为父元素，因此它与其他材质输入控件一致。升级后将 mat-form-field div 元素。

 <mat-form-field>
  <mat-select [(ngModel)]="selected2">
    <mat-option *ngFor="let option of options2" [value]="option.id">{{ option.name }}</mat-option>
  </mat-select>
</mat-form-field>

原文由 Igor 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

唯一的解决方案是您的表单控件或 Ng Model 在 mat select 标记中的值必须与分配给选项标记中的值的文本匹配 这是 Ts 文件

selectedFood = 'Tacos';

模板

    <mat-form-field appearance="fill">
      <mat-label>Favorite Food</mat-label>
      <mat-select [(value)]="selectedFood">
        <mat-option value=''>---------</mat-option>
<mat-option value='Tacos'>Tacos</mat-option>
<mat-option value='Pizza'>Pizza</mat-option>

      </mat-select>
    </mat-form-field>
    <p>You selected: {{selectedFood}}</p>

原文由 Zia Khan 发布，翻译遵循 CC BY-SA 4.0 许可协议