[解決済み] Angular Material: mat-select がデフォルトを選択しない

質問

オプションがすべて配列で定義されたオブジェクトである mat-select があります。 デフォルトの値をオプションの 1 つに設定しようとしていますが、ページがレンダリングされるときに選択されたままになっています。

私のタイプスクリプトファイルは以下を含みます。

  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>

を設定してみました。 selected2 と value で mat-option をオブジェクトとそのidの両方に適用し、その上で [(value)] と [(ngModel)] の中に mat-select を追加しましたが、どれも動作していません。

素材バージョン2.0.0-beta.10を使用しています。

どのように解決するのですか？

テンプレートで値のバインディングを使用します。

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 要素を親要素として受け入れるようになり、他の材料入力コントロールと整合性がとれました。このため div 要素を mat-form-field 要素に置き換えてください。

<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>