解決承諾angular2：房產「包括」不上型存在「[]」

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; })); 
    } 
} 

英雄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; 
} 

卸下Promise<Hero[]>部分來自getHeroIds正義事業

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

無關，與你的代碼，承諾或角度。打字稿有以下觀點：

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

這財產上我數組類型確實存在;你必須調查爲什麼它不在你的身上。

編輯： 啊，Sasxa's answer解釋了爲什麼，以及如何解決它。

Answer 3

您正在使用哪種瀏覽器？

看着我可以使用的網站我看到，這種方法在少數瀏覽器，如Chrome和Opera實施。

看到這個：http://caniuse.com/#search=includes

我覺得就是你正在使用你的瀏覽器還沒有understant的方法。

爲了解決你的問題，使用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 how to return array of objects from nested promise幸運命中顯示一名男子使用「< any>」。這解決了我的問題，代碼再次工作

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