角度2の文字列補間で更新された値が表示されない

Question

角度2を学習しようとしていますが、私のコントローラのメソッドにボタンをクリックするためのhttps://angular.io/docs/ts/latest/guide/user-input.htmlについては、このドキュメントの次に奇妙な問題があります。

クリックイベントバインディングの例から始めました。私はng new test-appと角cliの簡単なアプリケーションを作成し、クリックすると、ページにメッセージを追加する単一のボタンが含まれるようにそれを修正しました。

Iは、2つのコンポーネント、アプリケーションコンポーネント、ここで示されたメッセージ・コンポーネントを有する：

message.component.html：

<p>{{message}}</p> 

message.component.ts：

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-message', 
    templateUrl: './message.component.html', 
    styleUrls: ['./message.component.css'] 
}) 
export class MessageComponent implements OnInit { 

    message: string; 

    constructor() { 
    this.message = 'some initial message'; 
    } 

    ngOnInit() { 
    } 

} 

アプリ.component.html：

<button (click)="addMessage()">Click</button> 
<app-message *ngFor="let message of messages"></app-message> 

app.component.ts：

import { Component } from '@angular/core'; 
import { MessageComponent } from './message/message.component'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    messages = []; 

    addMessage() { 
    const newMessage = new MessageComponent(); 
    newMessage.message = 'Something else entirely'; 
    this.messages.push(newMessage); 
    } 
} 

私はng serveでこれを実行すると、ボタンが期待通りに表示されますが、私はボタンをクリックすると、メッセージのみsome initial messageは私のアプリのコントローラによって異なる値を与えられているにもかかわらず表示されます。検索中に、文字列補間を：<p [innerText]="message"></p>に置き換えることによって一方向データバインディングを行う別の方法が見つかりましたが、結果は同じです。

ここでは、なぜ更新された値Something else entirelyが表示されないのでしょうか？

Answer 1

MessageComponentコンポーネントは@Inputとしてメッセージを取る必要があります。

export class MessageComponent implements OnInit { 

@Input() message: string; 
} 

AppComponentが

<app-message *ngFor="let message of messages" 
    [message]="message.message"></app-message>