如何在 Angular 2 Material Autocomplete 中获取所选项目的值答案

【问题标题】：How can I get selected item value in Angular 2 Material Autocomplete如何在 Angular 2 Material Autocomplete 中获取所选项目的值
【发布时间】：2018-10-26 17:47:38
【问题描述】：

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

CountryID -> 项目值（或索引）

国家 -> 项目文本

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

这是我的代码：

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 不是 Country。

【问题讨论】：

请添加现在显示ID的UI元素的代码（右边6的那个）。
其实这是显示6的代码，

标签： angular autocomplete angular-material2

【解决方案1】：

您需要在<md-autocomplete> 标签内使用[displayWith]="displayFn"。此外，您可以将整个对象传递为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

【讨论】：

谢谢，但它不起作用。据我所知，国家在 displayFn 函数中为空。我还检查了文档，我认为它可能无法正常工作，因为我们没有在函数参数中发送任何用户对象。
你检查过演示吗？如果您传递 [value]="country"，它应该可以工作。您不必通过“用户”来显示 Fn 工作，而是采用“国家”对象。
问题是我无法获得选定的值。如果我这样设置 CountryID： [value]="country.CountryID" 那么 this.WeatherSearchForm.get('country').value 返回 Malta not 6 并且显示值是 6 而不是 Malta。如果我设置这个：[value]="country.Country" 那么显示值是正确的，即马耳他。但是 this.WeatherSearchForm.get('country').value 返回 Malta 不是 6。
我现在想通了。谢谢你的帮助。我传递了对象而不是值。和 displayFn 是一样的。 displayFn(国家): 字符串 { 调试器;回国？ country.Country : country.CountryID;当我尝试获取已转换为 Country 对象的值并获取 CountryID 时，如下所示： this.SavetoDB(this.WeatherSearchForm.get('country').value, .... SavetoDB(country:Countries, . .... parseInt(country.CountryID)
我可以调用displayFn里面的其他函数吗？它返回我错误

【解决方案2】：

这是最终的工作版本，希望对其他人有所帮助：

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

selectedCountry:Countries;
displayFn(country: Countries): string {
  this.selectedCountry = country;
  console.log(this.selectedCountry);
  return country ? country.Country : country.CountryID;
}

this.SavetoDB(this.WeatherSearchForm.get('country').value);

SavetoDB(country:Countries)
{
   countryID = parseInt(country.CountryID);
...

【讨论】：