2017-08-25 39 views
0

我終於在我的Angular4應用程序中獲得了md-autocomplete的工作,但是當你第一次點擊列表時它沒有顯示選項(就像它在demo中那樣) - 它只是當選擇改變時顯示它。md-autocomplete在第一次點擊時沒有更新

這是我的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); 
    } 

UPDATE:

我添加了一個plunker。現在已經差不多了,我現在唯一的問題是,當我選擇一個用戶時,我希望列表保持可見狀態,但只顯示新的過濾列表(不包含所選用戶)。目前它不會更新,即使我再次點擊輸入。我必須輸入一些東西,然後將其刪除,更新過濾列表...

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

+0

請創建一個蹦牀 – Faisal

+1

嗨費薩爾,我已經添加了一個笨蛋以上 –

回答

0

試圖改變自己的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。希望它有幫助

相關問題