如何在 AutoComplete Material2 中使用 [displayWith] 显示 [英] How to display using [displayWith] in AutoComplete Material2
问题描述
我有一个来自我的 API 的 array
,我正在使用 Material2#AutoComplete 来过滤这个......到目前为止它正在工作,但是我无法显示另一个属性而不是选项中的绑定值.
I have an array
that comes from my API and I'm using Material2#AutoComplete to filter this... it's working so far, however I'm in trouble to display the another property instead of the binded value in option.
我知道我必须使用 displayWith
,但是它并没有像我期望的那样工作.名为 [displayWith]="displayFn.bind(this)">
的函数只返回 id
,我怎样才能获得完整的对象并返回 <功能上的代码>名称代码>.
I know I have to use displayWith
, however it isn't working as I'm expecting. The function called as [displayWith]="displayFn.bind(this)">
just returns me the id
, how can I get the full object and so return the name
on function.
顺便说一句,我仍然希望在我的 FormControl 中绑定 id.
BTW, I still want to have the id binded in my FormControl.
一些代码:
组件:
export class AutocompleteOverviewExample {
stateCtrl: FormControl;
filteredStates: any;
states = [
{
id: 1,
name: 'Alabama'
},
{
id: 2,
name: 'North Dakota'
},
{
id: 3,
name: 'Mississippi'
}
];
constructor() {
this.stateCtrl = new FormControl();
this.filteredStates = this.filterStates('');
}
onKeyUp(event: Event): void {
this.filteredStates = this.filterStates(event.target.value);
}
filterStates(val: string): Observable<any> {
let arr: any[];
console.log(val)
if (val) {
arr = this.states.filter(s => new RegExp(`^${val}`, 'gi').test(s.name));
} else {
arr = this.states;
}
// Simulates request
return Observable.of(arr);
}
displayFn(value) {
// I want to get the full object and display the name
return value;
}
}
模板:
<md-input-container>
<input mdInput placeholder="State" (keyup)="onKeyUp($event)" [mdAutocomplete]="auto" [formControl]="stateCtrl">
</md-input-container>
<md-autocomplete #auto="mdAutocomplete" [displayWith]="displayFn.bind(this)">
<md-option *ngFor="let state of filteredStates | async" [value]="state.id">
{{ state.name }}
</md-option>
</md-autocomplete>
基本上和这个问题(不幸的是,两个答案都不正确或抛出错误).
Basically, it's almost the same as this question (unfortunately both answers are incorrect or throw errors).
这是PLUNKER.
推荐答案
如果你想用 md-options
绑定整个对象,那么你应该用 state<绑定到 option/code> 并在
displayFn
处返回 state.name
这样你就不必绑定 this
.
If you want the entire object to be binded with md-options
, then you should bind to option with state
and return state.name
at displayFn
and this way you don't have to bind this
.
<md-autocomplete #auto="mdAutocomplete" [displayWith]="displayFn">
<md-option *ngFor="let state of filteredStates | async" [value]="state">
{{ state.name }}
</md-option>
</md-autocomplete>
displayFn(state) {
return state.name;
}
演示工具.
如果你只想绑定 state.id
到 md-options
,你必须遍历 states
来找到 state.name
基于state.id
,这样绑定this
是需要的.
and if you want to bind only state.id
to md-options
, you have to loop through states
to find state.name
based on state.id
and this way binding this
is needed.
<md-autocomplete #auto="mdAutocomplete" [displayWith]="displayFn.bind(this)">
<md-option *ngFor="let state of filteredStates | async" [value]="state.id">
{{ state.name }}
</md-option>
</md-autocomplete>
displayFn(id) {
if (!id) return '';
let index = this.states.findIndex(state => state.id === id);
return this.states[index].name;
}
演示工具.
这篇关于如何在 AutoComplete Material2 中使用 [displayWith] 显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!