Angular2 @ TypeScript错误rxjs/Subject ::当用户停止输入时进行筛选

我正在使用Angular 2.0.0-beta.0和TypeScript 1.7.5。而试图改变巧妙的过滤器：Angular2 @ TypeScript错误rxjs/Subject ::当用户停止输入时进行筛选

https://angular.io/docs/ts/latest/guide/server-communication.html#!#more-observables

当用户停止键入“聪明”过滤器只能做一些事情。

我得到编译错误：

Error:(30, 20) TS2345: Argument of type '(term: string) => void' is not assignable to parameter of type '(x: {}, ix: number) => Observable<any>'. Type 'void' is not assignable to type 'Observable<any>'.

运行时错误：

EXCEPTION: Error during instantiation of Test!. 
ORIGINAL EXCEPTION: TypeError: this._searchTermStream.debounceTime is not a function

test.ts

import {bootstrap} from 'angular2/platform/browser'; 
import {Component} from 'angular2/core'; 
import {Observable}  from 'rxjs/Observable'; 
import {Subject}   from 'rxjs/Subject'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
     <h3>Test</h3> 
     Filter basic <input #filterBasic (keyup)="searchBasic(filterBasic.value)"/><br> 
     Filter clever <input #filterClever (keyup)="searchClever(filterClever.value)"/> 
     <ul> 
      <li *ngFor="#contact of contactsFilter">{{contact}}</li> 
     </ul> 
    ` 
}) 

export class Test { 

    public contacts: string[] = ["John", "Kaen", "Kath", "Joop", "Joost"]; 
    public contactsFilter: string[] = this.contacts; 

    private _searchTermStream = new Subject<string>(); 

    private items:Observable<string[]> = this._searchTermStream 
     .debounceTime(300) 
     .distinctUntilChanged() 
     .switchMap((term: string) => this.contactFilter(term)); 

    constructor() {} 

    searchBasic(term: string) { 
     console.log("Filter Basic " + term + " called"); 
     this.contactFilter(term); 
    } 

    searchClever(term: string) { 
     console.log("Filter Clever " + term + " called"); 
     this._searchTermStream.next(term); 
    } 

    contactFilter(term: string) { 
     this.contactsFilter = this.contacts.filter(item => (item.indexOf(term) >= 0)) 
    } 
} 

bootstrap(Test);

的index.html

<!DOCTYPE html> 
<html> 
    <head> 
    <base href="/"> 
    <script src="angular2/bundles/angular2-polyfills.js"></script> 
    <script src="typescript/lib/typescript.js"></script> 
    <script src="systemjs/dist/system.js"></script> 
    <script src="angular2/bundles/router.dev.js"></script> 
    <script src="rxjs/bundles/Rx.js"></script> 
    <script src="angular2/bundles/angular2.js"></script> 
    <script src="angular2/bundles/http.dev.js"></script> 
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"> 
    <script> 
     System.config({ 
     transpiler: 'typescript', 
     typescriptOptions: { emitDecoratorMetadata: true }, 
     packages: {'components': {defaultExtension: 'ts'}} 
     }); 
     System.import('components/test') 
      .then(null, console.error.bind(console)); 
    </script> 
    </head> 
    <body> 
    <my-app>Loading...</my-app> 
    </body> 
</html>

来源

2016-02-22 Herman Fransen

解决运行时后和编译错误以下Sasxa的解决方案“searchClever”函数不会等待（debounceTime 300毫秒），为用户停止键入并在第一个“键入”事件后直接触发该功能 –

您正在收到运行时错误，因为Observables默认只有少数几个操作员。你必须明确地导入它们：

// in test.ts 
import 'rxjs/add/operator/debounceTime';

或：

// in bootstrap.ts 
import 'rxjs/Rx';

编译错误是因为签名不匹配，从文档中的一个。修改几行：

.switchMap((term: any, i) => this.contactFilter(term));

和

contactFilter(term: string) { 
    this.contactsFilter = this.contacts.filter(item => (item.indexOf(term) >= 0)) 
    // Return some observable to make editor happy 
    // Could be something useful even (; 
    // Or just like this: 
    return Observable.of(true); 
}

来源

2016-02-22 16:49:13 Sasxa

关于运行时错误，你没有导入debounceTime操作，如下所述：

import 'rxjs/add/operator/debounceTime';

运营商不包括由默认情况下，您需要根据您的需要逐一添加它们。

看到这个答案脱颖而出的详细信息：

Angular 2 HTTP GET with TypeScript error http.get(...).map is not a function in [null]

来源

2016-02-22 16:50:42

Angular2 @ TypeScript错误rxjs/Subject ::当用户停止输入时进行筛选

回答

相关问题