web-dev-qa-db-ja.com

Angular2 @ TypeScript Observableエラー

入力フィールドがあり、ユーザーが検索文字列を入力するときに、_heroService httpリクエストを行う前に、ユーザーが少なくとも300ミリ秒（デバウンス）入力を停止するのを待ちます。変更された検索値のみがサービスに到達します（distinctUntilChanged）。 switchMapは、これらの_heroServiceオブザーバブルを組み合わせた新しいオブザーバブルを返し、元のリクエスト順序に並べ替えて、最新の検索結果のみをサブスクライバーに配信します。

Angular 2.0.0-beta.0およびTypeScript 1.7.5を使用しています。

このことを正しく機能させるにはどうすればよいですか？

コンパイルエラーが発生します。

Error:(33, 20) TS2345: Argument of type '(value: string) => Subscription<Hero[]>' is not assignable to parameter of type '(x: {}, ix: number) => Observable<any>'.Type 'Subscription<Hero[]>' is not assignable to type 'Observable<any>'. Property 'source' is missing in type 'Subscription<Hero[]>'.
Error:(36, 31) TS2322: Type 'Hero[]' is not assignable to type 'Observable<Hero[]>'. Property 'source' is missing in type 'Hero[]'.

実行時エラー（検索入力フィールドに最初のキーを入力した後）：

EXCEPTION: TypeError: unknown type returned
STACKTRACE:
TypeError: unknown type returned
at Object.subscribeToResult (http://localhost:3000/rxjs/bundles/Rx.js:7082:25)
at SwitchMapSubscriber._next (http://localhost:3000/rxjs/bundles/Rx.js:5523:63)
at SwitchMapSubscriber.Subscriber.next (http://localhost:3000/rxjs/bundles/Rx.js:9500:14)
...
-----async gap----- Error at _getStacktraceWithUncaughtError 
EXCEPTION: Invalid argument '[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]' for pipe 'AsyncPipe' in [heroes | async in Test@4:16]

test1.ts

import {bootstrap}         from 'angular2/platform/browser';
import {Component}         from 'angular2/core';
import {HTTP_PROVIDERS}    from 'angular2/http';

import {Observable}        from 'rxjs/Observable';
import {Subject}           from 'rxjs/Subject';
import 'rxjs/Rx';

import {Hero}              from './hero';
import {HeroService}       from './hero.service';

@Component({
    selector: 'my-app',
    template: `
        <h3>Test</h3>
        Search <input #inputUser (keyup)="search(inputUser.value)"/><br>
        <ul>
            <li *ngFor="#hero of heroes | async">{{hero.name}}</li>
        </ul>
    `,
    providers: [HeroService, HTTP_PROVIDERS]
})

export class Test {

    public errorMessage: string;

    private _searchTermStream = new Subject<string>();

    private heroes: Observable<Hero[]> = this._searchTermStream
        .debounceTime(300)
        .distinctUntilChanged()
        .switchMap((value: string) =>
            this._heroService.searchHeroes(value)
                .subscribe(
                    heroes => this.heroes = heroes,
                    error =>  this.errorMessage = <any>error)
        )

    constructor (private _heroService: HeroService) {}

    search(value: string) {
        this._searchTermStream.next(value);
    }
}

bootstrap(Test);

hero.ts

export interface Hero {
    _id: number,
    name: string
}

hero.service.ts

import {Injectable}     from 'angular2/core';
import {Http, Response} from 'angular2/http';
import {Headers, RequestOptions} from 'angular2/http';
import {Observable}     from 'rxjs/Observable';
import 'rxjs/Rx';

import {Hero}           from './hero';

@Injectable()

export class HeroService {

    private _heroesUrl = 'api/heroes';

    constructor (private http: Http) {}

    getHeroes () {
        return this.http.get(this._heroesUrl)
            .map(res => <Hero[]> res.json())
            .do(data => console.log(data))
            .catch(this.handleError);
    }

    searchHeroes (value) {
        return this.http.get(this._heroesUrl + '/search/' + value )
            .map(res => <Hero[]> res.json())
            .do(data => console.log(data))
            .catch(this.handleError);
    }

    addHero (name: string) : Observable<Hero>  {

        let body = JSON.stringify({name});
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });

        return this.http.post(this._heroesUrl, body, options)
            .map(res =>  <Hero> res.json())
            .do(data => console.log(data))
            .catch(this.handleError)
    }

    private handleError (error: Response) {
        // in a real world app, we may send the server to some remote logging infrastructure
        // instead of just logging it to the console
        console.log(error);
        return Observable.throw('Internal server error');
    }
}

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/test1')
            .then(null, console.error.bind(console));
    </script>
  </head>
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

次に、別のバージョン「test2.ts」を示します。これは、（キーアップ）イベントごとにhttp要求を正常に実行します。

import {bootstrap}         from 'angular2/platform/browser';
import {Component}         from 'angular2/core';
import {HTTP_PROVIDERS}    from 'angular2/http';

import {Hero}              from './hero';
import {HeroService}       from './hero.service';

@Component({
    selector: 'my-app',
    template: `
        <h3>Test</h3>
        Search <input #inputUser (keyup)="search(inputUser.value)"/><br>
        <ul>
            <li *ngFor="#hero of heroes">{{hero.name}}</li>
        </ul>
    `,
    providers: [HeroService, HTTP_PROVIDERS]
})

export class Test {

    public heroes:Hero[] = [];
    public errorMessage: string;

    constructor (private _heroService: HeroService) {}

    search(value: string) {
        if (value) {
            this._heroService.searchHeroes(value)
                .subscribe(
                    heroes => this.heroes = heroes,
                    error =>  this.errorMessage = <any>error);
        }
        else {
            this.heroes = [];
        }
    }
}

bootstrap(Test);
httptypescriptangularobservablerxjs
12
Herman Fransen

.subscribe(...)は、Subscriptionではなく、Observableを返します。 subscribe(...)を削除するか、.map(...)に置き換えて、値にアクセスするときに.subscribe(...)を使用します。

18
Günter Zöchbauer