Angular2：インラインテンプレートのエラー

Question

私はコンポーネントをそのコンポーネントのテンプレートに使用するために別のコンポーネントに指示として渡していますが、私はError in inline templateを取得していますが、これはかなり曖昧ですが、指示に指さしています。実際にコンポーネント自体で正しくインスタンス化しているかどうかはわかりません。

メッセージlist.ts

import {Component, Input} from '@angular/core'; 
import {Message} from './message'; 
import {MessageModal} from './message'; 

@Component({ 
    selector: 'message-list', 
    template: require('./message-list.html'), 
    styles: [require('./message-list.css')], 
    directives: [MessageModal] 
}) 

export class MessageList { 
    @Input() 
    messages: Message[]; 
} 

メッセージ-するlist.html

<div class="messages"> 
    <table class="table table-striped" style="width:75%"> 
    <tr *ngFor="let item of messages"> 
     <td><message-modal messageInput="{{item.message}}"></message-modal></td> 
    </tr> 
    </table> 
</div> 

MessageModalは、入力を受け取りmessageInput、及びmessageもMessageの特性です。エラーはmessage-list.htmlの<message-modal>ディレクティブの行4にあります。何が起きてる？

Answer 1

このようないくつかの変更を加えるメッセージモーダルの入力としてmessageInputを取っているし、あなたが @Input messages経由.TSファイルになっている： - より多くのあなたがここでの作業例を見ることができます参照してください

<div class="messages"> 
    <table class="table table-striped" style="width:75%"> 
    <tr *ngFor="let item of messages"> 
     <td><message-modal [messageInput]="item.message"></message-modal></td> 
    </tr> 
    </table> 
</div> 


export class MessageList { 
    @Input() messageInput: any 
    messages: Message[]; 
    constructor(){ 
    console.log(this.messageInput); 
    } 
} 

を

Working Example of @Input

Answer 2

@input問題は、あなたの@Input財産です。 MessageListコンポーネントには親からの入力がありません。しかし、message-modalはその親からMessageListと呼ばれています。したがって、MessageListに@Inputを使用する必要はありません。これは以下のコードは、後に必要とされるであろう

export class MessageList { 
    @Input()      
// dont require as its parent doesn't send any data I guess. 

    messages: Message[];   
// dont require.still as you are using messages as an array I don't know how'd you get its value. 
} 

、

export class MessageModal{ 
    @Input() messageInput: any; 
}