Syntax error 角度2教程-第4部分：“；SyntaxError:意外标记<；"(x2026)"；

编辑：我试图应用蒂埃里在回答中提供的修复程序@Thierry，但我一直收到相同的错误。 我创建了一个包含完整项目的存储库（clean with no comments），因为它是根据教程和应用@Thierry的修复程序生成的：

我正在学习Angular 2的教程

在第4部分的末尾，我得到了以下错误：

---

SyntaxError:Unexpected token我查看了您的plunkr，问题来自以下几行：

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

事实上，您混合了两种方法：

• 您可以在组件属性上设置承诺，然后在解析承诺时使用

  async

  管道显示数据

  @Component({
    selector: 'my-app',
    template:`
      <li *ngFor="#hero of heroes">
        (...)
      </li>
    `
  })
  export class AppComponent implements OnInit {
    getHeroes() {
      this.heroes = this._heroService.getHeroes();
    }
  }
  

查看我的更新在一个分叉的plunkr:

---

否则我看不到任何错误，比如

SyntaxError:Unexpected token谢谢你的回答。稍后我将尝试调试它。也许您可以看看我用完整代码创建的存储库？非常感谢。
import {Component, OnInit} from 'angular2/core';
import {Hero} from './hero'; 
import {HeroDetailComponent} from './hero-detail.component'; 
import {HeroService} from './hero.service'; 

@Component({
    selector: 'my-app',
    template:`
      <h1>{{title}}</h1>
      <h2>My Heroes</h2>
      <ul class="heroes">
       <li *ngFor="#hero of heroes"
           [class.selected]="hero === selectedHero"
           (click)="onSelect(hero)">
         <span class="badge">{{hero.id}}</span> {{hero.name}}
       </li>
      </ul>
     <my-hero-detail [hero]="selectedHero"></my-hero-detail>
     `,
     // for the sake of code readibility I removed "styles"
    directives: [HeroDetailComponent], 
    providers: [HeroService], 
})

export class AppComponent implements OnInit {
    title = 'Tour of Heroes'; 
    heroes: Hero[]; 
    selectedHero: Hero; 

    constructor(private _heroService: HeroService) { } 

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

    ngOnInit() {
        this.getHeroes();
    }

    onSelect(hero: Hero) { this.selectedHero = hero; }

}

import {bootstrap}    from 'angular2/platform/browser' 
import {AppComponent} from './app.component'

bootstrap(AppComponent); 

import {Component} from 'angular2/core';
import {Hero} from './hero';

@Component({
    selector: 'my-hero-detail',
    template: `
      <div *ngIf="hero">
        <h2>{{hero.name}} details!</h2>
        <div><label>id: </label>{{hero.id}}</div>
        <div>
          <label>name: </label>
          <input [(ngModel)]="hero.name" placeholder="name"/>
        </div>
      </div>`,
    inputs: ['hero']
})

export class HeroDetailComponent {
    hero: Hero;
}

import {Hero} from './hero';
import {HEROES} from './mock-heroes'; 
import {Injectable} from 'angular2/core';

@Injectable() 
export class HeroService { 
    getHeroes() {
        return Promise.resolve(HEROES); 
    }

}

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

import {Hero} from "./hero";

export var 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" }
];

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

@Component({
  selector: 'my-app',
  template:`
    <li *ngFor="#hero of heroes">
      (...)
    </li>
  `
})
export class AppComponent implements OnInit {
  getHeroes() {
    this.heroes = this._heroService.getHeroes();
  }
}

@Component({
  selector: 'my-app',
  template:`
    <li *ngFor="#hero of heroes">
      (...)
    </li>
  `
})
export class AppComponent implements OnInit {
  getHeroes() {
    this._heroService.getHeroes().then(heroes => this.heroes = heroes);
  }
}