Question

如何将数据从一个页面转移到另一个页面，但它显示错误我是新的角色

TypeError：无法读取MediaItemComponent中[{{mediaItem.id}}中未定义的属性“id”

如何获取数据

first.html

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

first.ts

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

first.html

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

Answer 2

DOCS说你应该像你一样避免重命名@Input（）。这就是这个问题的原因。

要修复组件行为，只需将@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
}

使用输入将数据传输到组件

2 个答案: