[英]How can I get selected item value in Angular 2 Material Autocomplete
I have created an autocomplete field with Angular Material and getting country list from web api succesfully. 我已经使用Angular Material创建了一个自动完成字段,并成功从web api获取国家/地区列表。
CountryID -> item value(or index) CountryID - >项目值(或索引)
Country -> item text 国家 - >项目文本
When I try to get selected item's value (not text) it return the text as expected. 当我尝试获取所选项目的值(而不是文本)时,它会按预期返回文本。 But I need to get selected item's value.
但我需要获得所选项目的价值。
This is my code: 这是我的代码:
this.WeatherSearchForm.get('country').value; // this returns the selected country name, ex: France
and 和
<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>
Edit: After I changed this line 编辑:我改变了这一行
<md-option *ngFor="let country of countries | async" [value]="country.Country">
to this, 对此,
<md-option *ngFor="let country of countries | async" [value]="country.CountryID">
it worked fine, this.WeatherSearchForm.get('country').value;
它工作正常,
this.WeatherSearchForm.get('country').value;
returned the CountryID. 返回CountryID。
But in UI side after selecting a country in the autocomplete field now I see the CountryID not Country. 但是在自动填充字段中选择国家/地区后,在UI端,我看到CountryID不是Country。
You need to use [displayWith]="displayFn"
inside <md-autocomplete>
tag. 您需要在
<md-autocomplete>
标记内使用[displayWith]="displayFn"
。 Also, you have a pass the whole object as value
. 此外,您将整个对象作为
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>
In your compoent, add: 在你的组件中,添加:
displayFn(country): string {
return country ? country.Country : country;
}
You can read more about it from Setting separate control and display values section in docs 您可以在文档中的“ 设置单独的控件和显示值”部分中阅读有关它的更多信息
Here is the final working version, hope it helps anyone else: 这是最终的工作版本,希望它可以帮助其他人:
<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);
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.