Question

我终于在我的Angular4应用程序中运行了md-autocomplete，但是当你第一次点击列表时它没有显示选项（就像它在demo中那样） - 它只显示一次选择变化。

这是我的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。它现在几乎就在那里，我现在唯一的问题是，当我选择一个用户时，我希望列表保持可见，但只显示新的过滤列表（没有选定的用户）。目前，即使我再次点击输入，它也不会更新。我必须键入内容，然后将其删除以更新已过滤的列表...

https://plnkr.co/edit/hcy1x2QIePChhbdhXbTs?p=preview

Answer 1

尝试像这样更改ngOnInit()：

ngOnInit() {
Observable.from(this.options)
          .toArray()
          .subscribe(users=>{
  this.users = users;
  this.filteredOptions = this.myControl.valueChanges
    .startWith(null)
    .map(user => user && typeof user === 'object' ? user.profile.name : user)
    .map(name => this.filter(name));
});

在这种情况下，当您设置filteredOptions时，您的用户集合将包含数据。希望它有所帮助

Answer 2

在下面添加课程，可在90％的时间内工作：

.mat-option-text {
    pointer-events: none;
}

为什么？：
在mat-option组件内部，有一个span元素，带有mat-option-text类。我想该事件应该在mat-option组件上触发。所以我们要忽略该span元素上的click事件

首次点击时，md-autocomplete不会更新

2 个答案: