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> 

서비스 : 나는 자동 완성에 오류하지만 결과가 없습니다

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

: userService.getUsersByEmail(email)는 이러한 종류의 데이터를 당기고 . 나는

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, 데이터

Answer 1

병이 난 일반적으로 사용하는 것이 당신이 내 예제를 제공 입력의 각 변화를 제대로 당겨진다 크롬 (탭 네트워크)의 디버거에서 볼

<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); 

이 당신을 위해 작동하는지 알려주세요.