Question

我是TypeScript和Angular的初学者，所以这个问题可能有些奇怪。我有一个简单的JSON返回Heros列表： http://demo8521374.mockable.io/titan

我需要我的服务来执行GetById，但为什么Hero总是未定义出来，有人请指出我正确的位置，这就是我正在做的事情：

＆＃13;

        return this.http.get("http://demo8521374.mockable.io/titan").map((response: Response) => {
            var result = response.json().heroes as Hero[];
            console.log(result);
            return result;
        }).filter(x => x.filter(x => x.id == id)).first().toPromise();

＆＃13;

在我的控制台中我可以看到数组已打印但在我的组件中没有得到对象：

＆＃13;

    ngOnInit(): void {
        this.route.paramMap
            .switchMap((params: ParamMap) => this.heroService.getHero(+params.get('id')))
            .subscribe(hero => this.hero = hero);

        console.log(this.hero)
    }

＆＃13;

谢谢！

Answer 1

将代码修改为如下并且有效，确定有更好的方法：

    getHero(id: number): Promise<Hero> {

        return  this.http.get("http://demo8521374.mockable.io/titan").map((response: Response) => {
            var result = response.json().heroes as Hero[];
            console.log(result);
            return result;
        })

            .map(heros => {
                let y = heros.filter(x => x.id == id)[0]
                console.log(y);
                return y;
            })
            .toPromise();

Answer 2

虽然switchMap返回一个新的observable，但我假设getHero方法也返回一个observable。在这种情况下，您需要订阅getHero observable和现在switchMap observable以分配给您的英雄属性，如下所示：

ngOnInit(): void {
        this.route.paramMap
            .switchMap((params: ParamMap) => this.heroService.getHero(+params.get('id'))
            .subscribe(hero => this.hero = hero));

        console.log(this.hero)
    }

或者如果getHero正在返回一个承诺，那么它应该如下所示：

ngOnInit(): void {
        this.route.paramMap
            .do((params: ParamMap) => this.heroService.getHero(+params.get('id'))
            .then(hero => this.hero = hero)).subscribe();

        console.log(this.hero)
    }

很难排除这个问题的答案，但是你正在做的事情有点不清楚，并且似乎表明你正在混合使用Observables和Promises，因为我的猜测是你只需要Observables。

将服务更新为：

 return this.http.get("http://demo8521374.mockable.io/titan").map((response: Response) => {
            var result = response.json().heroes as Hero[];
            console.log(result);
            return result;
        }).filter(x => x.id === id).first().toPromise();

Angular observable不会过滤json数组结果

2 个答案: