"无法使用@input在角度2中读取未定义的属性'name'

Question

我想我在这里正在做的一切.

虽然浏览器控制台显示错误"无法读取属性'名称'未定义":

我的media.component.ts如下所示:

import { Component,Input } from '@angular/core';
@Component({
selector: 'my-media-component',
templateUrl: `./app/media.component.html`,
styleUrls: [`./app/media.component.css`]
})
export class MediaAppComponent{
@Input() mediaItem;

onDelete(){
 console.log('deleting....');
}
}

我的app.component.ts看起来像:

import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: `./app/app.component.html`,
 })
export class AppComponent  {
 firstMediaItem={
 name: 'sahil'
};
}

app.component.html看起来像:

its, working
 <my-media-component [mediaItem]="firstMediaItem"></my-media-component>

media.component.html看起来像:

<h1>{{mediaItem.name}}</h1>

Answer 1

mediaItem当Angular尝试解析绑定时,使用安全导航操作符来保护尚未设置的重新启动:

<h1>{{mediaItem?.name}}</h1>

更新

在你已经MediaAppComponent列出的Plunker @NgModule({ bootstrap: [App, MediaAppComponent]})中,如果它被用作普通组件,则该组件不应该存在.应该只列出根组件.

Plunker的例子