Observable onKeyUpをどのようにフィルタリングできますか？

Question

タイプstring配列で観測可能なものを検索/フィルタリングするにはどうすればよいですか？例えば

、私は今、私は、入力テキストボックスにどのようなユーザーのタイプに基づいて、この観測可能にフィルタを適用したいと思い、観察

names$ = Observable.of(['Lenovo','Dell','Toshiba','Apple','Microsoft']); 

を次のようしています。

私は次のコードを持っています&入力ボックスに入力されたユーザーのsearchTermに基づいてフィルタリングされたobservableを返したいと思います。

私はクライアント側の解決策を探しています。何らかの理由でクライアント側のデータがすでに&にあります。データをフィルタするためにサーバー上に検索語を送信できません。また、この例では、配列自体にフィルターを直接使用できることを理解していますが、これを観測可能にしたいと思います。

また、フラットマップ演算子を使って配列を平坦化しようとしましたが、終わりにobservableを返すことができませんでした。これは文字列配列でなければなりません。

ご協力いただきますようお願い申し上げます。前もって感謝します。

App.component.html

<!-- Textbox to receive user input --> 
Search:<input type='text' [(ngModel)]='searchTerm' (keypress)='onkeypress($event.target.value)'> 
<p>Search Term: {{searchTerm}}</p> 
<hr> 

<!-- Show search results here as ordered list --> 
<ng-container *ngIf='(names$|async)?.length>0'> 
    <ol> 
     <li *ngFor='let name of names$|async'> 
      {{name}} 
     </li> 
    </ol> 
</ng-container> 

App.component.ts

import {Component, OnInit} from '@angular/core'; 
import {Observable} from 'rxjs'; 

@Component({ 
    selector: 'my-app', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent implements OnInit { 
    names$: Observable<string[]>; 
    filteredNames$: Observable<string[]>; 
    searchTerm: string; 

    ngOnInit() { 
     this.names$ = Observable.of(['Lenovo', 'Dell', 'Toshiba', 'Apple', 'Microsoft']); 
    } 

    // HOW TO IMPLEMENT THIS FUNCTION ?? 
    onkeypress(value) { 
     console.log(value); 
     this.names$ = this.names$.map(names => names.indexOf(value) > 0) 
     // .filter(x=>{console.log(x.indexOf(value));return x.indexOf(value)>0}) 
     //  .subscribe(
     // (data)=>console.log(data),  (error)=>console.log('Error'+error), 
     //  ()=>console.log('complete')); 
    } 
} 

Answer 1

これを試してみてください。

1. なぜ観測値をnames.indexOf(value) > 0にマッピングしますか？ .map()は文字通りオブザーバブルを変換し、タイプstringのオブザーバブルをキャストしてbooleanと入力しただけです。

2. ユーザーが（onkeyupの）キー入力された場合namesのリストを変更したい場合は、なぜあなたは再びthis.names$にthis.names$バックを再割り当てしたいですか？それはあなたのコードを一度、最初のキーストロークだけで作業するようにします。値を保持する変数と、ngModelにバインドする変数の2つの変数が必要です。

3. asyncパイプを使用したい場合は、あなたのtypescriptファイルのオブザーバブルを購読する必要はありません。あなたのonKeyUp機能

   ngOnInit() { 
       this.data$ = Observable.of(['Lenovo', 'Dell', 'Toshiba', 'Apple', 'Microsoft']); 
       this.names$ = this.data$; 
   } 
   

   あなたがasyncパイプを使用していると仮定すると、これはする必要があります：

   をごngOnInit()で

、あなたの名前を追跡するために変数を作成

onKeyUp(value) { 
    this.names$ = this.data$ 
     .map(x => { 
      return x.filter(y=>y.toLowerCase().indexOf(value.toLowerCase())>-1); 
     }) 
} 

Working Stackblit s：https://stackblitz.com/edit/angular-yeaer6

Answer 2

ここでのいくつかのミスがあります

let value='Del' 
Rx.Observable.from(['Lenovo','Dell','Toshiba','Apple','Microsoft']) 
.filter(name=>name.indexOf(value)!==-1) 
.subscribe(console.log);