物业&#39;推动&#39;在类型&#39;承诺<任何[]>&#39;上不存在与|异步

时间:2017-03-30 16:10:28

标签: angular asynchronous typescript promise angular4

&#34; Property&#39; push&#39;并不存在于I&#39; IHero [] |诺&#39 ;.类型&#39;承诺&#39; enter image description here

上不存在属性

为什么不呢?它不是一个数组吗?

enter image description here

在角度cli项目中使用Angular 4进行英雄之旅。我使用异步管道作为转发器而不是官方教程的方法。 https://angular.io/docs/ts/latest/tutorial/toh-pt6.html

enter image description here

heroes.component.ts

export class HeroesComponent implements OnInit {
    heroes: IHero[]|Promise<IHero[]> = [];
    selectedHero: IHero;

    constructor(private _heroService: HeroService, private _router: Router)

    ngOnInit() {
        this.heroes = this._heroService.getHeroes();
    }

    add(name: string): void {
        name = name.trim();
        if (!name) { return; } 
        this._heroService.create(name)
            .then(hero => {
                this.heroes.push(hero); // RED SQUIGGLY ERROR HERE "Property 'push' does not exist on thype 'IHero[] | Promise<IHero[]>'. Property does not exist on type 'Promise<IHero[]>'"
            });
    }
}

hero.service.ts

...
getHeroes(): Promise<IHero[]> {
    return this._http.get(this.heroesUrl)
        .toPromise()
        .then( res => res.json().data as IHero[] )
        .catch( this._handleError) 
}
...

如果我在init.log上安装了this.heroes,我可以看到它是一个ZoneAwarePromise ....

enter image description here

如何让.push对此进行处理?

如果我使用传统的.then方法,那么|异步管道错误。进行。

enter image description here

错误之墙随之而来......

enter image description here

1 个答案:

答案 0 :(得分:1)

ngOnInit() {
    this.heroes = this._heroService.getHeroes();
}

应该是

ngOnInit() {
    this._heroService.getHeroes().then(val => this.heroes = val);
}

使用您的代码,您可以指定一个没有Promise方法的push