Question

好的，这是关于如何获取反映数据更改的视图的另一个问题。

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

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

~~我怀疑为了使这项工作可能需要使用rx Observable，但我不清楚何时需要它。~~

修改：这是一个工作的Plunker，证明不需要Observable：https://plnkr.co/edit/2iK9YOwLFfY3EylJn6At?p=preview

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

app.component.html

<page-message></page-message>

app.component.ts 代码段以演示我在应用组件中提供服务

@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);
    }
}

页-message.component.html

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

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

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

一些-另一component.ts

这是我在messages数组中添加一个条目

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

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

}

我现在也在我的应用程序中正常工作，但遗憾的是，我不能引用具体原因。更有可能的是新手错误的积累使情况变得混乱。我会留下这个问题并回答 - 也许那个掠夺者会帮助别人。

数据更改时Angular2视图不会更新

1 个答案: