数据更改时Angular2视图不更新答案

【问题标题】：Angular2 view not updating when data changes数据更改时Angular2视图不更新
【发布时间】：2016-12-18 22:35:07
【问题描述】：

好的，这是另一个关于如何获得反映数据变化的视图的问题。

我有一个服务和一个相关组件（页面消息）托管在主应用组件模板中。

服务公开一个数组。显示数组中的初始数据，但视图无法识别数组的任何更改。

~~我怀疑可能需要使用 rx Observable 才能完成这项工作，但我不清楚何时需要这样做。~~

编辑：这是一个有效的 Plunker，证明不需要 Observable：https://plnkr.co/edit/2iK9YOwLFfY3EylJn6At?p=preview

要让页面消息组件 HTML 视图识别并呈现对 messageService.pageErrorMessages 数组的更改，我缺少什么？

app.component.html

<page-message></page-message>

app.component.ts sn-p 证明我在应用组件中提供服务

@Component({
    moduleId: __moduleName,   // fully resolved filename; defined at module load time
    selector: 'my-app',
    directives: [ROUTER_DIRECTIVES, NavbarComponent, PageMessageComponent],
    templateUrl: "app.component.html",
    providers: [ApiService, MessageService]
})

export class AppComponent {
    ...

message.service.ts

我正在使用 message.service 提供一个接口来添加/删除消息

import {Injectable} from '@angular/core';

@Injectable()
export class MessageService {
    constructor() {
    }

    pageErrorMessages: Array<string> = new Array();

    addPageError(message: string) {
        this.pageErrorMessages.push(message);
    }
}

page-message.component.html

*这是未正确更新的组件 HTML *

<div *ngFor="#message of messageService.pageErrorMessages">
    <div class="alert alert-danger">{{message}}</div>
</div>

page-message.component.ts

import {Component} from '@angular/core';
import {MessageService} from "./../services/message.service";

@Component({
    moduleId: __moduleName, 
    selector: __moduleName,
    templateUrl: "page-message.component.html",
    providers: []
})

export class PageMessageComponent {
    constructor(public messageService: MessageService) { }
}

some-other-component.ts

这是我在消息数组中添加一个条目的地方

submit() {
    this.messageService.addPageError("this is an error");
}

【问题讨论】：

some-other-component.ts 是否有providers: [MessageService]？如果是这样，那么这就是您的问题......您有两个服务实例。在组件树的更高位置提供一次服务。
这是个好问题。问题中的原始代码显示我也在页面消息中提供它，但我已经删除了它，并且只在 app.component.ts 中提供服务。
什么代码调用submit()？如果触发最终导致调用 submit() 的事件未被 Angular 进行猴子修补，则更改检测将不会运行，因此您的视图将不会更新。（你不应该需要一个 Observable 来让它工作...... NgFor 将在每次执行 Angular 更改检测时检查数组的每个项目的更改。）
谢谢，这就是我对 observable 的疑惑。让我深入研究一下，也许我会创建一个 plnkr 来演示。目前，我的 submit() 是通过单击按钮调用的，因此在这方面应该没问题，但也许还有其他问题。
再次感谢。你是对的 - Observable 不需要。这是一个笨蛋：plnkr.co/edit/cXSXVIayCAKQzmZMFCoU?p=preview 底线 - 我做错了什么:)

标签： angular

【解决方案1】：

感谢@Mark Rajcok，他断言在这种情况下没有必要使用 Observable。

我创建了一个更新的 plunker，它演示了我的问题中的场景在不使用 Observable 的情况下正常工作

在此处查看 plunker：https://plnkr.co/edit/2iK9YOwLFfY3EylJn6At?p=preview

这是显示消息的组件：

import {Component} from '@angular/core'

import {MessageService} from './messageService'

@Component({
  selector: 'my-messagebar'
  template: `
    <div *ngFor="#message of messageService.messages">{{message}}</div>
  `
})

export class MessagebarComponent {

  constructor(public messageService:MessageService) {
  }

}

我现在在我的应用程序中也可以正常工作，但遗憾的是我无法列举具体原因。很可能是新手错误的积累使情况变得混乱。我会留下这个问题并回答 - 也许 plunker 会帮助其他人。

【讨论】：