解决promise angular2：类型“ []”上不存在属性“ includes”

Question

我遇到错误

app/hero-detail.component.ts(44,29): error TS2339: Property 'includes' does not exist on type '[]'.
app/hero.service.ts(25,25): error TS1122: A tuple type element list cannot be empty.

该代码将无法编译和运行，此错误在npm start 。

hero.service.ts：

import { Injectable } from '@angular/core';

import { Hero, HeroIds } from './hero';
import { HEROES } from './mock-heroes';

@Injectable()
export class HeroService {

  getHeroes(): Promise<Hero[]> {
    return Promise.resolve(HEROES);
  }

  getHero(id: number): Promise<Hero> {
    return this.getHeroes()
        .then(heroes => heroes.find(hero => hero.id === id));
  }

  getHeroesSlowly(): Promise<Hero[]> {
    return new Promise(resolve => {
      // Simulate server latency with 2 second delay
      setTimeout(() => resolve(this.getHeroes()), 2000);
    });
  }

  getHeroIds(): Promise<[]> {
    return this.getHeroes()
    .then(heroes => heroes.map(function(item) { return item.id; }));
  }
}

hero-detail.component.ts：

import { Component, Input, OnInit } from '@angular/core';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { Location } from '@angular/common';

import 'rxjs/add/operator/switchMap';
import { FlashMessagesService } from 'angular2-flash-messages';

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


@Component({
  moduleId: module.id,
  selector: 'my-hero-detail',
  templateUrl: './static/templates/hero-detail.component.html',
  styleUrls: ['./static/css/hero-detail.component.css'],
})
export class HeroDetailComponent implements OnInit {
    @Input() hero: Hero;
    hero_ids: Array<HeroIds> = [];

    constructor(
        private heroService: HeroService,
        private route: ActivatedRoute,
        private location: Location,
        private router: Router,
        private _flashMessagesService: FlashMessagesService
    ) { }

    ngOnInit(): void {
        this.route.params
            .switchMap((params: Params) => this.heroService.getHero(+params['id']))
            .subscribe(hero => this.hero = hero);
    }

    goBack(): void {
        this.location.back();
    }

    gotoDetail(hero_id: string): void {
        this.heroService.getHeroIds()
        .then(
            result => {
                if ( result.includes(+hero_id) ) {
                    this.router.navigate(['/detail', hero_id]);
                } else {
                    this._flashMessagesService.show("Please pick a valid hero ID");
                }
            }
        );
    }
}

模拟heroes.ts：

import { Hero } from './hero';

export const HEROES: Hero[] = [
  {id: 11, name: 'Mr. Nice'},
  {id: 12, name: 'Narco'},
  {id: 13, name: 'Bombasto'},
  {id: 14, name: 'Celeritas'},
  {id: 15, name: 'Magneta'},
  {id: 16, name: 'RubberMan'},
  {id: 17, name: 'Dynama'},
  {id: 18, name: 'Dr IQ'},
  {id: 19, name: 'Magma'},
  {id: 20, name: 'Tornado'}
];

hero.ts：

export class Hero {
  id: number;
  name: string;
}

export class HeroIds {
    id: number;
}

从getHeroIds删除Promise<Hero[]>部分只是导致

app/hero.service.ts(19,5): error TS1131: Property or signature expected.
app/hero.service.ts(23,3): error TS1128: Declaration or statement expected.
app/hero.service.ts(25,15): error TS1005: ';' expected.
app/hero.service.ts(26,12): error TS1005: ':' expected.
app/hero.service.ts(27,68): error TS1005: ',' expected.
app/hero.service.ts(29,1): error TS1128: Declaration or statement expected.

Answer 1

Array.prototype.includes()是ES2016规范的一部分（ link ）。 您必须将此库包含在TypeScript的编译中。 在您的tsconfig.json添加

"compilerOptions": {
  "lib": [ "es2016" ]
}

它应该工作。

Answer 2

与您的代码，promise或Angular无关。 打字稿有以下意见：

app/hero-detail.component.ts(44,29): error TS2339: Property 'includes' 
does not exist on type '[]'.

该属性肯定存在于我的 Array类型上； 您将不得不调查为什么它不属于您。

编辑 ：啊， Sasxa的答案说明了原因以及如何解决。

Answer 3

您正在使用哪个浏览器？

在“我可以使用”网站上，我看到这种方法是在少数浏览器（例如Chrome和Opera）中实现的。

看到这个： http : //caniuse.com/#search=includes

我认为这只是您使用的浏览器还算不错的一种方法。

为了解决您的问题，请使用find includes ：

gotoDetail(hero_id: string): void {
    this.heroService.getHeroIds()
    .then(
        result => {
            if ( result.find(+hero_id) ) {
                this.router.navigate(['/detail', hero_id]);
            } else {
                this._flashMessagesService.show("Please pick a valid hero ID");
            }
        }
    );
}

Answer 4

Angular 2的幸运命中如何从嵌套的Promise返回对象数组，显示了一个使用'<any>'的家伙。 这解决了我的问题，代码再次正常工作

 getHeroIds(): Promise<any> {
    return this.getHeroes()
    .then(heroes => heroes.map(function(item) { return item.id; }));
  }
}