gpt4 book ai didi

http - Angular2 @TypeScript 可观察到的错误

转载 作者:太空狗 更新时间:2023-10-29 17:02:34 24 4
gpt4 key购买 nike

我有一个输入字段,当用户键入搜索字符串时,我想等待用户停止键入至少 300 毫秒(去抖动),然后再执行 _heroService http 请求。只有更改的搜索值才能通过服务 (distinctUntilChanged)。 switchMap 返回一个结合了这些 _heroService observable 的新 observable,按照它们原来的请求顺序重新排列它们,并只向订阅者提供最新的搜索结果。

我正在使用 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]

测试1.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);

英雄.ts

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

英雄.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”,它在每次 (keyup) 事件后都可以正常执行 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);

最佳答案

.subscribe(...) 返回一个 Subscription,而不是一个 Observable。删除 subscribe(...) 或将其替换为 .map(...) 并使用 .subscribe(...)当您访问它以获取值时。

关于http - Angular2 @TypeScript 可观察到的错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35581606/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com