Angular未检测到来自postMessage的新窗口中的ngFor更改

是指在Angular应用中使用ngFor指令时，如果在一个新窗口中通过postMessage方法修改了ngFor所绑定的数据，Angular可能无法自动检测到这个变化。

ngFor是Angular中的一个结构指令，用于循环遍历一个集合，并根据集合中的每个元素动态生成相应的HTML元素。当ngFor所绑定的数据发生变化时，Angular会自动检测并更新相应的视图。

然而，当使用postMessage方法在一个新窗口中修改ngFor所绑定的数据时，Angular的变化检测机制可能无法自动感知到这个变化。这是因为postMessage方法是浏览器提供的一种跨窗口通信的方式，它可以在不同的窗口之间传递消息，但它不会触发Angular的变化检测机制。

为了解决这个问题，可以使用Angular的ChangeDetectorRef服务手动触发变化检测。ChangeDetectorRef是Angular中的一个服务，它提供了一些方法用于手动触发变化检测。

具体操作步骤如下：

在接收postMessage的窗口中，引入ChangeDetectorRef服务，并在构造函数中注入该服务。
在接收到postMessage消息的处理函数中，通过ChangeDetectorRef的detectChanges方法手动触发变化检测。

示例代码如下：

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

@Component({
  selector: 'app-root',
  template: `
    <div *ngFor="let item of items">{{ item }}</div>
  `,
})
export class AppComponent implements OnInit {
  items: string[] = [];

  constructor(private cdr: ChangeDetectorRef) {}

  ngOnInit() {
    window.addEventListener('message', (event) => {
      // 接收到postMessage消息后更新数据
      this.items = event.data;
      // 手动触发变化检测
      this.cdr.detectChanges();
    });
  }
}

在上述示例代码中，通过监听window对象的message事件来接收postMessage消息，并在接收到消息后更新ngFor所绑定的数据。然后，通过调用ChangeDetectorRef的detectChanges方法手动触发变化检测，确保Angular能够正确更新视图。

需要注意的是，ChangeDetectorRef的detectChanges方法是一个比较耗性能的操作，因此在实际使用中应该谨慎使用，避免频繁调用。

推荐的腾讯云相关产品和产品介绍链接地址：