は、別のページに1ページからデータを取得する方法入力

Question

とコンポーネントにデータを取得するが、それは私が、角度

はTypeErrorに新しいショーのエラーです：[{{mediaItem.id}に未定義のプロパティ「ID」を読み込めません} MediaItemComponent

<section> 
    <media-item [mediaItem]="firstMediaItem"></media-item> 
</section> 

first.ts

データ

first.htmlを取得する方法を

で

import {Component} from 'angular2/core'; 
import {MediaItemComponent} from './secound'; 

@Component({ 
    selector: 'media-tracker-app', 
    directives: [MediaItemComponent], 
    templateUrl: 'app/app.component.html', 
    styleUrls: ['app/app.component.css'] 
}) 
export class AppComponent { 
    firstMediaItem = { 
     id: 1, 
     name: "Firebug", 
     medium: "Series", 
     category: "Science Fiction", 
     year: 2010, 
     watchedOn: 1294166565384, 
     isFavorite: false 
    }; 
} 

secound.html

<h2>{{ mediaItem.id }}</h2> 
<div>Watched on {{ mediaItem.watchedOn }}</div> 
<div>{{ mediaItem.category }}</div> 
<div>{{ mediaItem.year }}</div> 

secound.ts

import {Component, Input} from 'angular2/core'; 

@Component({ 
    selector: 'media-item', 
    templateUrl: 'app/media-item.component.html', 
    styleUrls: ['app/media-item.component.css'] 
}) 
export class MediaItemComponent { 
    @Input('mediaItemToWatch') mediaItem; 
} 

Answer 1

DOCSは、@Input（）の名前を変更しないでください。それがこのような問題の原因です。

secound.ts

import {Component, Input} from 'angular2/core'; 

@Component({ 
    selector: 'media-item', 
    templateUrl: 'app/media-item.component.html', 
    styleUrls: ['app/media-item.component.css'] 
}) 
export class MediaItemComponent { 
    @Input() mediaItem; //HERE, do not rename the input 
} 

を：ちょうどこれに@Input宣言を変更する、あなたのコンポーネントの動作を修正するために

Answer 2

first.html

<section> 
 
    <media-item [mediaItemToWatch]="firstMediaItem"></media-item> 
 
</section>