如何过滤可观察的onKeyUp？

Question

如何搜索/过滤类型字符串数组的可观察性？

例如，我有以下可观察的

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

现在，我想根据用户在输入文本框中输入的内容来过滤这个可观察的内容。

所以我有以下代码

请注意，我正在寻找客户端解决方案。我已经有了客户端的数据

我还尝试了flatmap操作符来展平数组，但最终还是无法返回字符串数组类型的可观察值。

任何帮助都将不胜感激。提前谢谢。

应用程序。组成部分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>

一个pp.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

试试这个

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

Answer 2

你在这里犯了一些错误。

>

如果您希望在用户键入（onkeyup）时更改名称列表，为什么要再次将this.names$重新分配回this.names$？这将使您的代码工作一次，又名工作在第一个击键。您应该有两个变量，一个用于保存值，另一个绑定到您的ngModel。

如果要使用asyncpipe，则无需订阅typescript文件中的observable。

在ngOnInit（）中，创建一个变量以跟踪您的姓名：

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

假设您使用的是async管道，这应该是您的onKeyUp函数：

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

工作堆叶盘：https://stackblitz.com/edit/angular-yeaer6