角材料 2 自動完成設置鍵值

Question

我是角度材料的新手，我有一個帶有國籍列表的汽車，我的國家/地區包含國家/地區代碼和值。 我想設置國家/地區代碼如果我從下拉列表中選擇國家/地區，並且如果我的回復有國家/地區代碼，我需要將其與我在 ngModel 中的國家/地區名稱進行映射。 我的問題是我正在將國家/地區代碼映射到我的 ngModel，我需要在 UI 屏幕上顯示國家/地區名稱。

 <input name="nationality" matInput placeholder="nationality" class="form-control" [matAutocomplete]="nationAuto" [formControl]="nationalityCtrl" [(ngModel)]="myModel.nationality" required> <mat-option *ngFor="let country of filteredNationalityList | async" [value]="country.code"> <span>{{ country.value }}</span> </mat-option>

相同的 [value]="country.code" 適用於選擇下拉菜單，但不適用於自動完成下拉菜單。

我在這里創建了示例。 https://stackblitz.com/edit/angular-pvqugs你能告訴我我失蹤的地方嗎？ 提前致謝

Answer 1

Mohammad 的答案中的值是選定的國家/地區代碼，因此只需通過代碼獲取國家/地區，並通過將此行添加到 optionSelected 來自己在輸入字段中設置值：

nationalityCtrl.setValue(country.value)

Answer 2

您必須按如下方式更改代碼：

<mat-form-field>

  <input matInput type="text" placeholder="nationality" [matAutocomplete]="nationAuto" [formControl]="nationalityCtrl">    
  <mat-autocomplete #nationality="matAutocomplete" (optionSelected)="optionSelected($event)">
    <mat-option *ngFor="let country of filteredNationalityList | async" [value]="country.code">
      {{ country.value }}
    </mat-option>
  </mat-autocomplete>

</mat-form-field>



optionSelected(event) {
    let value = event.option.value;     
    //this.propagateChange(category.title);
}