angular - 如何在 Angular 2 Material Autocomplete 中获取选定的项目值

Question

我已经使用 Angular Material 创建了一个自动完成字段，并成功地从 web api 获取了国家/地区列表。

CountryID -> 项目值(或索引)

国家 -> 项目文本

当我尝试获取所选项目的值(不是文本)时，它会按预期返回文本。但我需要获取所选项目的值(value)。

这是我的代码:

this.WeatherSearchForm.get('country').value; // this returns the selected country name, ex: France

和

<md-input-container>
  <input mdInput placeholder="Select Country..." [mdAutocomplete]="auto" class="form-control validate filter-input" formControlName="country">
</md-input-container>
<md-autocomplete #auto="mdAutocomplete" md-input-name="autocompleteField" required md-input-minlength="2" md-input-maxlength="18"
  md-select-on-match required md-input-minlength="2">
  <md-option *ngFor="let country of countries | async" [value]="country.Country">
    {{ country.Country }}
  </md-option>
</md-autocomplete>

编辑:在我改变这一行之后

<md-option *ngFor="let country of countries | async" [value]="country.Country">

对此，

<md-option *ngFor="let country of countries | async" [value]="country.CountryID">

它工作正常，this.WeatherSearchForm.get('country').value; 返回了 CountryID。

但现在在自动完成字段中选择国家后，在 UI 端我看到的是 CountryID 而不是国家。

Answer 1

您需要使用 [displayWith]="displayFn"里面<md-autocomplete>标签。此外，您将整个对象传递为 value .

<md-autocomplete #auto="mdAutocomplete" md-input-name="autocompleteField" required md-input-minlength="2" md-input-maxlength="18"
  md-select-on-match required md-input-minlength="2" [displayWith]="displayFn">
  <md-option *ngFor="let country of countries | async" [value]="country">
    {{ country.Country }}
  </md-option>
</md-autocomplete>

在你的组件中，添加:

displayFn(country): string {
      return country ? country.Country : country;
}

您可以从 docs 的设置单独的控制和显示值部分阅读更多相关信息

demo