web-dev-qa-db-ja.com

Angularオートコンプリートは[オブジェクトオブジェクト]として値を返します

私の要件は、選択した値を入力ボックスに表示し、選択したIDと値を.tsファイルに取得することでした。 IdとValueが必要なので、オプションの値を[value]に直接バインドしています。しかし、そうすると、[オブジェクトオブジェクト]として出力されます。

<mat-form-field appearance="outline" class="w-100">
            <mat-label>Enter Hotel Name</mat-label>
            <input type="text" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
            <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selectedclient($event)">
                <mat-option *ngFor="let option of clients; let i = index" [value]="option">
                    {{ option.name }}
                  </mat-option>
            </mat-autocomplete>
            <mat-icon matSuffix>location_on</mat-icon>
          </mat-form-field>

Tsファイル

    options = [
        { id: 1, name: 'One'},
        { id: 2, name: 'Two'},
        { id: 3, name: 'Three'}
       ];

selectedclient(event) {
     console.log(event.option.value);
   }

StackblitzエディターのURL： https://stackblitz.com/edit/angular-mat-select-data-n4tvmj

angularangular-material-6
4
Gvs Akhil

displayWith 属性を利用したい。マニュアルによると：

オプションのコントロール値（フォームに保存されるもの）をオプションの表示値（テキストフィールドに表示されるもの）とは異なるものにする場合は、オートコンプリートでdisplayWithプロパティを設定する必要があります素子。これの一般的な使用例は、データをオブジェクトとして保存し、オプションの文字列プロパティの1つだけを表示する場合です。

これを機能させるには、コントロール値を目的の表示値にマップする関数をコンポーネントクラスに作成します。次に、オートコンプリートのdisplayWithプロパティにバインドします。

テンプレート側

<mat-autocomplete ... [displayWith]="getOptionText">

スクリプト側

getOptionText(option) {
  return option.name;
}

デモ： https://stackblitz.com/edit/angular-mat-select-data-cddqia

7
Jeto