角度材料2を使用したリモート検索

Question

私は、オートコンプリート入力がトラフを検索するための約4kの項目のリストを持っています。これは実際にコンストラクタでフェッチして角度のあるアプリでフィルタリングするのは実用的ではないので、私はサーバ上で検索を行い、そのデータをコンポーネントに返す必要があります。

私はコードは次のようになりますどのように失われた少しだけど、ここで私の試みだ：

HTML

<mat-form-field class="w-100"> 
    <input #searchInput [matAutocomplete]="searchOptions" formControlName="search" matInput placeholder="Search"/> 
</mat-form-field> 
<mat-autocomplete #searchOptions="matAutocomplete"> 
    <mat-option *ngFor="let item of items | async" [value]="item.id"> 
     {{ item.description }} 
    </mat-option> 
</mat-autocomplete> 

活字体

export class SearchDialogComponent { 

    myForm: FormGroup; 
    items: any; 

    constructor(public formBuilder: FormBuilder, 
     public itemService: ItemService, 
     public dialogRef: MatDialogRef<SearchDialogComponent>, 
     @Inject(MAT_DIALOG_DATA) public data: any) { 
      this.createForm(); 
    } 

    ngOnInit(): void { 
     this.items = this.myForm.get('search').valueChanges.map(q => this.searchFilter(q)); 
    } 

    createForm() { 
     this.myForm = this.formBuilder.group({ 
      search: new FormControl(''), 
     }); 
    } 

    searchFilter(q: string) { 
     this.itemService.fullSearch(q).subscribe(result => { 
      return result; // This won't work, but I have no idea what will :) 
     }); 
    } 
} 

Answer 1

ああ！次に、2つのもの：

• flatMap()演算子を使用して、検索サービスコールを実行します。
• asyncパイプを使用しているため、その観測対象に登録しないでください。

私はT結果型であることitemService.fullSearch()戻りObservable<T[]>をとります。

P.S.anyが元のコードでない場合、この問題は時間がかかりません。 searchFilterメソッドのシグネチャが戻り値の型を宣言しました。 TypeScriptは、少なくともJavaScriptを少なくともより安全なものにすることに関するものです。

---

this.items = this.myForm 
    .get('search') 
    .valueChanges 
    .flatMap(searchQuery => this.itemService.fullSearch(searchQuery));