javascript - *ng不更新，即使有 ChangeDetectorRef

Question

我是 Angular 的新手，使用 Angular 12 完成一项学校作业，试图构建一个聊天窗口，当用户发送消息时它会自动更新，但我找不到让它重新显示的方法当我将新对象添加到数组时呈现。

聊天组件.ts:

@Component({
  selector: 'app-chat',
  templateUrl: './chat.component.html',
  styleUrls: ['./chat.component.scss']
})
@Injectable({  providedIn: 'root'  })
export class ChatComponent implements OnInit {
  messageArray: Array<any>;

  constructor(private changeDetector: ChangeDetectorRef) {
    this.messageArray = [{message: "test message 1", style: "answer"}];
  }
  ngOnInit(): void {}
  addMessage(message: string, style: string): void {
    this.messageArray = [...this.messageArray, {message: message, style: style}];
    this.changeDetector.detectChanges();
    console.log(this.messageArray);
  }

}

聊天组件.html:

<div class="container chatContainer">
    <div class="row" *ngFor="let message of messageArray">
        <div class="col">
            <div class="text-wrap text-break message {{message.style}}">
                {{message.message}}
            </div>
        </div>
    </div>
</div>

我尝试使用 [...array] 和 .push() 更新数组，尝试使用 [...array] 在推送后创建一个新数组，同时尝试 ChangeDetectionStrategy.Default 和 .OnPush，并尝试在调用我的 addMessage() 方法的父组件中也执行所有这些操作。在所有尝试中，数组都会正确地登录到控制台，但拒绝更新 View 。

有什么想法吗？

Answer 1

如果我是你，我宁愿使用 BehaviorSubject 并做这样的事情:

@Component({
  selector: 'app-chat',
  templateUrl: './chat.component.html',
  styleUrls: ['./chat.component.scss']
})


@Injectable({  providedIn: 'root'  })
export class ChatComponent implements OnInit {
  messageArray: BehaviorSubect<Array<any>>;

  constructor(private changeDetector: ChangeDetectorRef) {
    this.messageArray = new BehaviorSubject<Array<any>>([{message: "test message 1", style: "answer"}]);
  }
  ngOnInit(): void {}
    addMessage(message: string, style: string): void {
    this.messageArray.next([...this.messageArray, {message: message, style: style}]);
  }
}

聊天组件.html:

<div class="container chatContainer">
  <div class="row" *ngFor="let message of messageArray | async">
      <div class="col">
          <div class="text-wrap text-break message {{message.style}}">
              {{message.message}}
          </div>
      </div>
  </div>
</div>