Angular 不会自动显示字符串数组中的更改

Question

let signalRServerEndPoint = 'https://localhost:44338';
this.connection = $.hubConnection(signalRServerEndPoint);
this.proxy = this.connection.createHubProxy('MessagesHub');

this.proxy.on("ReceiveMessage", (message) => {
  console.log(message); //LOG IS OKAY
  this.listMessages.push(message); // PUSH IS OKAY
  console.log(this.listMessages); // LOG IS OKAY IS OKAY
});

listmessages 是一个 string[] 数组。console.log() 工作正常， this.listMessages.push(message) 工作正常，因为第二个 console.log 显示正确的字符串数组。但我的问题是在我的用户界面中，它不会自动填充新的 listMessages。仅当我在文本框中键入内容或再次单击发送按钮时，它才会显示新填充的数组，然后显示我之前发送的最新数组。任何人都可以帮助我这有什么问题吗？

let signalRServerEndPoint = 'https://localhost:44338';
this.connection = $.hubConnection(signalRServerEndPoint);
this.proxy = this.connection.createHubProxy('MessagesHub');

this.proxy.on("ReceiveMessage", (message) => {
  console.log(message); //LOG IS OKAY
  this.listMessages.push(message); // PUSH IS OKAY
  console.log(this.listMessages); // LOG IS OKAY IS OKAY
});

Answer 1

这很可能是未触发更改检测的情况，因为对变量的引用未修改。您可以使用解构运算符而不是推送来强制它。尝试将push语句替换为

this.listMessages = [...this.listMessages, message];

或者您可以保留该push语句并使用 Angular 手动触发更改检测ChangeDetectorRef。

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

export class AppComponent {
  constructor(private changeDetectorRef: ChangeDetectorRef) { }

this.proxy.on("ReceiveMessage", (message) => {
  this.listMessages.push(message);
  this.changeDetectorRef.detectChanges();
});