我终于在我的Angular4应用程序中运行了md-autocomplete,但是当你第一次点击列表时它没有显示选项(就像它在_2683117中那样) - 它只在选择改变时显示它 .
这是我的HTML:
<md-input-container>
<input mdInput placeholder="Assign Artist" [mdAutocomplete]="auto" [formControl]="userCtrl">
</md-input-container>
<md-autocomplete #auto="mdAutocomplete">
<md-option *ngFor="let user of filteredUsers | async" [value]="user"
(onSelectionChange)=selectUser(user)>
{{ user }}
</md-option>
</md-autocomplete>
我的组件:
constructor(private route: ActivatedRoute) {
this.userCtrl = new FormControl();
this.filteredUsers = this.userCtrl.valueChanges
.startWith('')
.map(name => this.filterUsers(name));
}
filterUsers(val: string) {
if (this.users === undefined) return;
return val ? this.users.filter(s => s.toLowerCase().indexOf(val.toLowerCase()) == 0 && this.selectedUsers.includes(s) == false)
: this.users.filter(s => this.selectedUsers.includes(s) == false);
}
更新:
我添加了一个plunker . 它现在几乎就在那里,我现在唯一的问题是,当我选择一个用户时,我希望列表保持可见,但只显示新的过滤列表(没有选定的用户) . 目前,即使我再次点击输入,它也不会更新 . 我必须输入内容,然后将其删除以更新已过滤的列表...
1 回答
尝试像这样更改你的
ngOnInit()
:在这种情况下,当您设置
filteredOptions
时,您的用户集合将包含数据 . 希望能帮助到你