Observable onKeyUp을 어떻게 필터링 할 수 있습니까?

Question

유형 문자열 배열의 관찰 가능 항목을 검색/필터링하려면 어떻게합니까?

예를 들어

, 내가

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

가 지금은에 따라이 관찰을 필터링하고 싶은 관찰 다음 한 입력 텍스트 상자에 어떤 사용자 유형.

그래서 다음 코드가 있습니다 & 입력 상자에 입력 한 사용자의 searchTerm을 기준으로 필터링 된 관찰 가능을 반환하고 싶습니다.

클라이언트 측 솔루션을 찾고 있습니다. 데이터를 필터링하기 위해 서버에서 검색어를 전송할 수없는 이유로 클라이언트 측에 이미 데이터가 있습니다 &. 나는 또한이 예제에서 직접 배열 자체에 필터를 사용할 수 있지만 이것을 관찰 가능하게하고 싶다고 생각한다.

또한 flatmap 연산자를 사용해 배열을 평평하게 만들었지 만, 문자열 배열 형식의 끝에있는 관찰 가능 항목을 반환 할 수 없었습니다.

도움이 될 것입니다. 미리 감사드립니다.

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을 입력했습니다. 당신은 사용자가 (onKeyUp에) 키 입력 할 때 names의 목록을 변경하려면

2. , 왜 당신이 this.names$ 다시 this.names$에 재 할당 하시겠습니까? 그러면 코드가 첫 번째 키 스트로크에서만 작동합니다. 두 개의 변수가 있어야합니다. 하나는 값을 보유하고 다른 하나는 ngModel에 바인드됩니다.

3. async 파이프를 사용하려는 경우 입력 스크립트에서 관찰 가능 항목을 구독 할 필요가 없습니다.당신의 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); 
     }) 
} 

작업 Stackblit S : https://stackblitz.com/edit/angular-yeaer6

Answer 2

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 노력이

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