2017-08-02 18 views
1

我從Angular2服務獲取數據並嘗試放入自動完成組件。當用戶關注自動完成組件時,下拉列表將打開爲空,但當用戶鍵入內容時,下拉列表將顯示結果。md-autocomplete angular2從服務器獲取數據顯示焦點上的空白下拉列表(但在第一次輸入時填充)

我想在自動完成的時刻顯示所有數據,而不僅僅是在第一次打字之後。

我的模板是:

<md-input-container> 
    <input mdInput [mdAutocomplete]="auto" [formControl]="myCtrl"> 
</md-input-container> 
<md-autocomplete #auto="mdAutocomplete"> 
    <md-option *ngFor="let item of filteredItems | async" [value] = "item.name"> 
     {{item.name}} 
    </md-option> 
</md-autocomplete> 

而且我的部分是:

import {Component, OnInit} from '@angular/core'; 
import {FormControl} from '@angular/forms'; 
import {Observable} from 'rxjs/Observable'; 

import {MyService} from '../services/my.service'; 

import {ItemInterface} from '../model/item-interface'; 

@Component({ 
    selector: 'app-test', 
    templateUrl: './test.component.html', 
    styleUrls: ['./test.component.css'] 
}) 
export class TestComponent implements OnInit { 

myCtrl: FormControl; 
filteredItems: Observable<ItemInterface[]>; 

items: ItemInterface[] = []; 
errorMessage:any = ''; 

constructor(private myService: MyService) { 

    this.myCtrl = new FormControl(); 
    this.filteredItems = this.myCtrl.valueChanges 
            .startWith(null) 
            .map(i => i && i === 'object' ? i.name : i) 
            .map(name => name ? this.filterItem(name) : this.items.slice()); 

    } 

    ngOnInit() { 
    this.myService.getItems() 
        .subscribe(
         items => this.items = items, 
        error => this.errorMessage = error 
       ); 
} 


filterItems(name: string) { 
    return this.items.filter(option => new RegExp(`^${name}`, 
'gi').test(option.name)); 
} 
} 

回答

1

我認爲,如果您將回調裏面你myCtrl代碼,應該解決的問題。

我用這個plunker中的一些示例代碼對它進行了測試,它正在工作。

TS:

constructor(private dataService: DataService) { 
    this.myCtrl = new FormControl(); 
} 

ngOnInit(){ 
    this.dataService.fetchData() 
    .subscribe(
     (data) => { 
     this.items = data.customers; 
     this.filteredItems = this.myCtrl.valueChanges 
      .startWith(null) 
      .map(i => i && i === 'object' ? i.name : i) 
      .map(name => name ? this.filterItem(name) : this.items.slice()); 

    } 
); 
+0

非常感謝,Nehal。它根據你的解釋工作。 – Fabrizio

相關問題