代码之家 › 专栏 › 技术社区 › Thomas Segato

以角度向前打字

angular

0

Thomas Segato · 技术社区 · 7 年前

this.apiService.getAutoComplete(query).subscribe((data) => {  
   return data;
})

我是个新手,所以我可能走错了路。但我找到了这些样品,看起来很符合我的需要: https://valor-software.com/ngx-bootstrap/#/typeahead

我的问题是这些示例基于静态数组,我尝试了一段时间将其更改为异步数据。但是没有运气。我尝试使用async示例并更改了以下功能,但不起作用:

getStatesAsObservable(token: string): Observable<any> {       
  return of(
    this.apiService.getAutoComplete('ja').subscribe((data) => {  
      return data;
    })
  );
}

HTML:

<pre class="card card-block card-header">Model: {{asyncSelected | json}}</pre>

<input [(ngModel)]="asyncSelected"
       [typeaheadAsync]="true"
       [typeahead]="dataSource"
       (typeaheadLoading)="changeTypeaheadLoading($event)"
       (typeaheadOnSelect)="typeaheadOnSelect($event)"
       [typeaheadOptionsLimit]="7"
       placeholder="Locations loaded with timeout"
       class="form-control">
<div *ngIf="typeaheadLoading">Loading</div>

1 回复 | 直到 7 年前

1

Christian 7 年前

您可以使用具有自动完成组件的@ngez库: https://ngez-platform.firebaseapp.com/#/core/autocomplete

component.html

<input type="text" [ngezAutocomplete]="ngezAutocomplete">

<ngez-autocomplete #ngezAutocomplete>
    <ngez-autocomplete-option [value]="value" *ngFor="let value of data">
        {{value}}
    </ngez-autocomplete-option>
</ngez-autocomplete>

组件技术

import { Component, AfterViewInit, ViewChild } from "@angular/core";
import { NgEzAutocompleteDirective } from "@ngez/core";
import { switchMap } from 'rxjs/operators';

@Component({
    selector: 'app',
    templateUrl: './app.component.html'
})
export class AppComponent implements AfterViewInit{

    data: string[];

    @ViewChild(NgEzAutocompleteDirective) autocomplete: NgEzAutocompleteDirective;

    ngAfterViewInit() {
        this.autocomplete.text$
            .pipe(
                 switchMap(query => this.apiService.getAutoComplete(query))
             )
            .subscribe(data=> {
                this.data = data
        })
    }
}