md-autocomplete angular2从服务器获取数据（使用服务）

Question

我想从使用自动完成组件的angular2/material2服务器获取数据。 （https://material.angular.io/components/component/autocomplete）

TS

emailCtrl: FormControl; 
    filteredEmails: any; 

    constructor(
    private companieService: CompanieService, 
) { 
    this.emailCtrl = new FormControl(); 
    this.filteredEmails = this.emailCtrl.valueChanges 
     .startWith(null) 
     .map(email => this.filterEmails(email)); 
    } 


    filterEmails(email: string) { 
    this.userService.getUsersByEmail(email) 
     .subscribe(
     res => { 
      return res 
     }, 
     error => { 
      console.log(error); 
     } 
    ) 
    } 

HTML

<md-input-container> 
     <input mdInput placeholder="Email" [mdAutocomplete]="auto" [formControl]="emailCtrl" [(ngModel)]="fetchedUser.profile.email"> 
    </md-input-container> 

    <md-autocomplete #auto="mdAutocomplete"> 
     <md-option *ngFor="let email of filteredEmails | async" [value]="email"> 
     {{email}} 
     </md-option> 
    </md-autocomplete> 

服务：userService.getUsersByEmail(email)是拉这样的数据：

['email1@email.com','email2@email.com','email3@email.com'] 

我在自动完成没有错误，但没有结果。 我看到了铬（选项卡网络）的调试数据被正确拉为输入中的每个变化

Answer 1

我给你我的例子，我通常使用，

this.SearchForm.controls['city_id'].valueChanges 
    .debounceTime(CONFIG.DEBOUNCE_TIME) 
    .subscribe(name => { 
    this.domain = [['name', 'ilike', name]]; 
    this.DataService.getAutoComplete('res.city', this.domain) 
     .subscribe(res => { 
     return this._filteredCity = res['result']['records'] 
    }) 
    }) 

HTML

<div class="mb-1 ml-1 mt-1" fxFlex="30"> 
      <md-input-container style="width: 100%" > 
      <input mdInput placeholder="Kota" (blur)="checkAutoComplete('city_id')" [mdAutocomplete]="city_id" [required]="true" [formControl]="SearchForm.controls['city_id']"> 
      </md-input-container> 
      <md-autocomplete #city_id="mdAutocomplete" [displayWith]="displayFn"> 
      <md-option *ngFor="let city of _filteredCity" [value]="city"> 
       <span>{{ city.name }}</span> 
      </md-option> 
      </md-autocomplete> 
      <div *ngIf="SearchForm.controls['city_id'].hasError('required') && SearchForm.controls['city_id'].touched" class="mat-text-warn text-sm">Kolom ini wajib diisi.</div> 
     </div> 

就像那样

Answer 2

这就是我所做的。

的.html

 <input formControlName="search" [mdAutocomplete]="auto" type="text" class="form-control"> 
 
<md-autocomplete #auto="mdAutocomplete"> 
 
    <md-option *ngFor="let data of filteredData | async" [value]="data.text"> 
 
    {{ data.text }} 
 
    </md-option> 
 
</md-autocomplete>

.TS

filteredData: Observable<any[]>; // async pipe needs to be an Observable 
myContent: any[] = []; 

this.filteredData = this.myformGroup.get('search').valueChanges 
.debounceTime(400) 
.do(value => { 

    // i don't want to make another request on value change if content placeholder already has it. 
    let exist = this.myContent.findIndex(t => t.text === value); 
    if (exist > -1) return; 

    // get data from the server. my response is an array [{id:1, text:'hello world'}] 
    this.myApiService.getSearch(value).subscribe((res: any[]) => { this.myContent = res; }); 

}).delay(500).map(() => this.myContent); 

让我知道，如果这对你的作品。