web-dev-qa-db-ja.com

angular 5 material 2-外部APIからのデータ取得の自動完了

私はangular 5とmaterial 2を使用しています。

Tsファイルには、次のプロパティがあります。

      filteredOptions: Observable<any[]>;

このプロパティには、オートコンプリートフィールドに表示する値の配列があります。

      [{
        id:'1', name: 'teste 1'},
        {id:'2', name: 'teste 2'},
        {id:'3', name: 'teste 3'
      }]

この値の配列はデータベースから取得され、ユーザーが何かを入力した後に表示されます。

htmlファイル：

          ##            <form class="example-form">
          ##              <mat-form-field class="example-full-width">
          ##                <input type="text" placeholder="Assignee" aria-label="Assignee" matInput [formControl]="myControl" [matAutocomplete]="auto">
          ##                <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
          ##                  <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
          ##                    {{ option.name }}
          ##                  </mat-option>
          ##                </mat-autocomplete>
          ##              </mat-form-field>
          ##            </form>

tsファイルの例：

    this.filteredOptions = Observable<any[]>;

    ngOnInit() {
      this.filteredOptions = this.myControl.valueChanges
        .pipe(
          startWith({}),
          map(getArrayOfValue(val))            
        );
      }

      // it is going to call an api to get the array of values to be shown in the field
      getArrayOfValue(val): Observable<any[]> {            
        const url = this.ROOT_URL + 'veiculo/' + val;
        return this.http.get<any[]>(url);
      }

このコードは私にエラーを与えます

Src/app/oficina/cadastro/veiculo/veiculo.component.ts（55,5）のエラー：エラーTS2322：タイプ 'Observable>'はタイプ 'Observable'に割り当てられません。タイプ「Observable」は、タイプ「any []」に割り当てられません。タイプ 'Observable'にプロパティ 'includes'がありません

angularrestangular-material2
11
andre luis borges de paula

いくつかの問題があります。たとえば、map(val => this.getArrayOfValue(val))が必要です。しかし、私はいくつかの追加の変更も提案します。 debounceTime、distinctUntilChanged、およびswitchMapの追加を検討してください。選択したデバウンス時間を設定します。これは、APIを完全にオーバーロードするためではありません。 switchMapは、ユーザーが最後に入力した値にリクエストを切り替えるのに役立ちます。また、APIリクエストにサービスを使用することを検討する必要があります。これが通常の処理方法です。したがって、http-requestをサービスに移動し、コンポーネントから呼び出すことをお勧めします。

TS：

  // inject your created service which makes the http-request
  constructor(private service: Service) { 

  this.filteredOptions = this.myControl.valueChanges
        .pipe(
          startWith(''),
          debounceTime(400),
          distinctUntilChanged(),
          switchMap(val => {
            return this.filter(val || '')
          })       
        );
  }

  // filter and return the values
 filter(val: string): Observable<any[]> {
    // call the service which makes the http-request
    return this.service.getData()
     .pipe(
       map(response => response.filter(option => { 
         return option.name.toLowerCase().indexOf(val.toLowerCase()) === 0
       }))
     )
   }  
}

その後、サービスはhttp-requestを呼び出します。 APIをオーバーロードしない場合、最初のフェッチ後にデータを変数に格納し、代わりにその変数のオブザーバブルを返すことができますが、これはオプションです。

opts = [];

getData() {
  return this.opts.length ?
    of(this.opts) :
    this.http.get<any>('https://jsonplaceholder.typicode.com/users').pipe(tap(data => this.opts = data))
}

また、テンプレートのオプションにvalueを使用しているようです。オブジェクト全体をキャプチャする場合は、[value]を使用します。

ここに[〜＃〜] demo [〜＃〜] （をいじってみてください:)

20
AJT82