1. ホーム
  2. angular

[解決済み] mat-selectでデフォルトのオプションを設定する

2023-01-28 16:21:06

質問

Angular materialのプロジェクトで、シンプルな選択オプションのフォームフィールドがあります。

コンポーネント.html

  <mat-form-field>
    <mat-select [(value)]="modeSelect" placeholder="Mode">
      <mat-option value="domain">Domain</mat-option>
      <mat-option value="exact">Exact</mat-option>
    </mat-select>
  </mat-form-field>

ここで [(value)]="modeSelect" はcomponent.tsファイルのmodeSelectプロパティにバインドされています。

というようにしたいのですが <mat-option value="domain">Domain</mat-option> がデフォルトで選択されるようにしたい。

ng-selected は、私のために動作しませんでした

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

StackBlitzの動作

を使う必要はありません。 ngModel やForms

あなたのhtmlの中に

 <mat-form-field>
  <mat-select [(value)]="selected" placeholder="Mode">
    <mat-option value="domain">Domain</mat-option>
    <mat-option value="exact">Exact</mat-option>
  </mat-select>
</mat-form-field>

そして、コンポーネント内でパブリックプロパティ selected をデフォルトに設定します。

selected = 'domain';