Question

我有一个Angular 2应用程序，其中包含一个类型为IMessage的数组的消息提要。在OnInit事件中，从服务器检索并显示消息。到现在为止还挺好。当我使用IMessage更新this.messagea.unshift(newMessage);数组时，视图不会显示新消息。当我遍历同一个数组时，我可以看到新消息在数组中并刷新页面（并从数据库中检索新消息）也显示它。

我的主要内容：

import { Component, OnInit } from '@angular/core'
import { IMessage } from './message.model';
import { MessageService } from './message.service';

@Component({
    selector: 'messages',
    template: `<message *ngFor="let message of messages" [message]="message"></message>`
})
export class MessagesComponent implements OnInit {
    private messages: IMessage[] = [];

    constructor(private messageService: MessageService) {

    }

    ngOnInit() {
        this.messageService.getMessages().subscribe((newMessages: IMessage[]) => {
            this.messages = newMessages;

            setTimeout(() => {
                let newMessage: IMessage = {
                    "id": 1,
                    "title": "TEST",
                    "message": "message"
                };
                this.messages.unshift(newMessage);
            });
        });

    }
}

我已阅读Angular中的更改检测，但使用ChangeDetectorRef并调用其detectChanges()或markForCheck()函数时，不会使用新邮件更新Feed。

我注意到当我直接输出messages而不是调用子组件时，列表会更新。

template: `<span *ngFor="let message of messages">{{message.title}}</span>`

Answer 1

调用messageService.getMessages()时，您的代码可能会在角度之外运行。这就是为变量赋值的原因，它不会更新视图。

尝试在角度NgZone内运行代码。之后，您的视图将成功更新。

import { Component, OnInit } from '@angular/core'
import { IMessage } from './message.model';
import { MessageService } from './message.service';
import {
    NgZone,
    ChangeDetectorRef
} from "@angular/core";
@Component({
    selector: 'messages',
    template: `<message *ngFor="let message of messages" [message]="message"></message>`
})
export class MessagesComponent implements OnInit {
    private messages: IMessage[] = [];

    constructor(private messageService: MessageService,private zone:NgZone) {

    }

    ngOnInit() {
        this.messageService.getMessages().subscribe((newMessages: IMessage[]) => {
            this.zone.run(()=>{
                this.messages = newMessages;
            });


            setTimeout(() => {
                let newMessage: IMessage = {
                    "id": 1,
                    "title": "TEST",
                    "message": "message"
                };
                this.zone.run(()=>{
                    this.messages.unshift(newMessage);
                });
            });
        });
    }
}

输入数据更改时，Angular 2 View不会更新

1 个答案: