Angular 2 Heroes教程缺少重復值

Question

我正在嘗試遵循Angular 2“英雄之旅”教程，但是遇到了問題。 在為（點擊）事件聲明“ onSelect”方法后，“讓英雄英雄”列表變為空白。 這是我到目前為止的內容：

app.component.ts：

import {Component} from '@angular/core';
import {MyComponent} from './my-component';



@Component({
    selector: 'my-app',
    template: `

        <h1>{{title}}</h1>
        <h2>My Heroes</h2>
        <ul class = 'heroes'>
            <li *ngFor="let hero of heroes" (click)='onSelect(hero)'>
                <span class='badge'>{{hero.id}}</span>
                {{hero.name}}
            </li>
        </ul>
        <h2>{{selectedHero.name}} details!</h2>
        <div><label>id: </label>{{selectedHero.id}}</div>
        <div>
            <label>name: </label><input [(ngModel)] ='selectedHero.name' placeholder = 'name'>
        </div>

        `,

    directives: [MyComponent]

    styles: [`
      .selected {
        background-color: #CFD8DC !important;
        color: white;
      }
      .heroes {
        margin: 0 0 2em 0;
        list-style-type: none;
        padding: 0;
        width: 15em;
      }
      .heroes li {
        cursor: pointer;
        position: relative;
        left: 0;
        background-color: #EEE;
        margin: .5em;
        padding: .3em 0;
        height: 1.6em;
        border-radius: 4px;
      }
      .heroes li.selected:hover {
        background-color: #BBD8DC !important;
        color: white;
      }
      .heroes li:hover {
        color: #607D8B;
        background-color: #DDD;
        left: .1em;
      }
      .heroes .text {
        position: relative;
        top: -3px;
      }
      .heroes .badge {
        display: inline-block;
        font-size: small;
        color: white;
        padding: 0.8em 0.7em 0 0.7em;
        background-color: #607D8B;
        line-height: 1em;
        position: relative;
        left: -1px;
        top: -4px;
        height: 1.8em;
        margin-right: .8em;
        border-radius: 4px 0 0 4px;
      }
      `]

})
export class AppComponent { 

    title = 'Tour of Heroes';

    public heroes = HEROES;

    selectedHero: Hero;

    function onSelect(hero: Hero) {
        selectedHero: hero;
    }

}



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

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

];

我在終端上遇到的錯誤：

app / app.component.ts（28,2）：錯誤TS1005：“，”。

app / app.component.ts（87,2）：錯誤TS1068：意外的令牌。 預期使用構造函數，方法，訪問器或屬性。

app / app.component.ts（91,1）：錯誤TS1128：需要聲明或聲明。

Answer 1

根據您得到的錯誤，我的猜測是：

- 1 add comma after directives array declaration on line 28
- 2 remove 'function' before your onSelect on line 87
- 3 assign value to var selectedHero like this on line 88 
        selectedHero = hero;

Answer 2

正如您的錯誤堆棧跟蹤告訴您：

1. 在directives: [MyComponent],后添加逗號directives: [MyComponent],

2. 從onSelect函數聲明中刪除function關鍵字。

3. 將hero變量分配給this.selectedHero而不是onSelect函數中的selectedHero 。

請注意，即使您將完成所有這些操作，在運行代碼時也不會看到英雄列表，因為應該從教程中執行額外的步驟才能正確顯示列表。 因此，請解決所有這些問題，然后再進一步學習本教程，一切將正常進行。