Angular 2中的字符串插值不显示更新值答案

【问题标题】：String interpolation in Angular 2 not displaying updated valueAngular 2中的字符串插值不显示更新值
【发布时间】：2017-09-29 09:31:59
【问题描述】：

我正在尝试学习 Angular 2，但在遵循此文档时遇到了一个奇怪的问题：https://angular.io/docs/ts/latest/guide/user-input.html for binding button clicks to a method on my controller.

我从他们的点击事件绑定示例开始。我使用带有 ng new test-app 的 angular cli 创建了一个简单的应用程序，并对其进行了修改，使其包含一个按钮，当我单击该按钮时，只需向页面添加一条消息。

我有两个组件，这里显示的应用组件和消息组件：

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() {
  }

}

app.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 的更新值。

【问题讨论】：

标签： javascript angular

【解决方案1】：

MessageComponent 组件应该将消息作为@Input：

export class MessageComponent implements OnInit {

 @Input() message: string;
}

AppComponent 应该像这样将这个输入发送给它的孩子

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

【讨论】：