Filter FormControl値の変更に基づく観測可能な配列

Question

Observableを使用して2つの項目リストをレンダリングしようとしています。 1つは完全な結果を示し、もう1つはフィルタリングされた結果を示します。

私は、このコンポーネントを持っている：

@Component({ 
    template: ` 
     <div *ngFor="let item of items | async"> 
      <span>{{item.name}}</span> 
     </div> 

     <input [formControl]="filterControl" /> 
     <div *ngFor="let item of filteredItems | async"> 
      <span>{{item.name}}</span> 
     </div> 
    ` 
}) 
export class TestComponent implements OnInit { 
    private filterControl = new FormControl(); 
    private items: Observable<Item[]>; 
    private filteredItems: Observable<Item[]>; 

    ngOnInit() { 
     this.items = this.dataService.get("items"); 

     this.filteredItems = this.filterControl.valueChanges 
     .debounceTime(300) 
     .distinctUntilChanged() 
     .combineLatest(this.items, (filterValue, items) => { 
      return items.filter((item: any) => item.name.toLowerCase().indexOf(filterValue.toLowerCase()) !== -1); 
     }); 
    } 
} 

コードが唯一のhttpリクエストではなく、良いです入力されたフィルタ文字、1つずつ送信します。しかし、問題は、filterControlが最初の値を出力するまで（inputに何かを入力すると）フィルタリングされた項目が表示されないということです。

デフォルト値を設定する方法、またはこのような問題を解決するより良い方法はありますか？

Answer 1

あなたはstartWith演算子を使用することができます

this.filteredItems = this.filterControl.valueChanges.startWith('') 

これが第1の値、デフォルト値は空の文字列は、