angular - md-autocomplete angular2 从服务器获取数据(带服务)

Question

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

是

  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']

我没有错误，但自动完成中没有结果。我在 chrome 调试器(选项卡网络)中看到输入中的每个更改都正确提取了数据

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>

就这样