首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

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

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

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

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

具体操作步骤如下:

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

示例代码如下:

代码语言:txt
复制
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方法是一个比较耗性能的操作,因此在实际使用中应该谨慎使用,避免频繁调用。

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

  • 云服务器(CVM):提供弹性计算能力,可根据业务需求快速创建和管理虚拟机实例。详情请参考:云服务器(CVM)
  • 云数据库 MySQL 版(CDB):提供高性能、可扩展的关系型数据库服务,适用于各种规模的应用。详情请参考:云数据库 MySQL 版(CDB)
  • 腾讯云函数(SCF):无服务器计算服务,支持按需运行代码,无需关心服务器管理。详情请参考:腾讯云函数(SCF)
  • 腾讯云对象存储(COS):提供安全、稳定、低成本的云端存储服务,适用于各种场景的数据存储和处理。详情请参考:腾讯云对象存储(COS)
  • 腾讯云人工智能(AI):提供丰富的人工智能服务,包括图像识别、语音识别、自然语言处理等。详情请参考:腾讯云人工智能(AI)
  • 物联网套件(IoT Suite):提供全面的物联网解决方案,包括设备接入、数据存储、数据分析等功能。详情请参考:物联网套件(IoT Suite)
  • 腾讯云移动开发(Mobile):提供移动应用开发和运营的一站式解决方案,包括移动后端云服务、移动应用分发等。详情请参考:腾讯云移动开发(Mobile)
  • 腾讯云区块链服务(BCS):提供快速部署和管理区块链网络的服务,支持多种区块链平台。详情请参考:腾讯云区块链服务(BCS)
  • 腾讯云游戏多媒体引擎(GME):提供游戏音视频通信和处理的服务,支持语音聊天、语音识别等功能。详情请参考:腾讯云游戏多媒体引擎(GME)
  • 腾讯云直播(Live):提供高可用、低延迟的直播服务,适用于各种直播场景。详情请参考:腾讯云直播(Live)
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

AngularDart 4.0 高级-管道 顶

管道和变化检测 Angular通过在每个DOM事件之后运行更改检测过程查找数据绑定值更改:每次击键,鼠标移动,计时器滴答和服务器响应。 这可能是昂贵Angular努力尽可能降低成本并适当。...如果你点击reset按钮,Angular用原有英雄新列表替换heroes并更新显示。 如果您添加了删除或更改英雄功能,Angular检测这些更改并更新显示。...纯净管道 仅当Angular检测到对输入值纯粹更改时才执行纯管道。 在AngularDart,纯粹改变仅仅来自对象引用改变(假设所有东西都是Dart对象)。...在本页面的前面,您了解这些管道必须是不纯,并且Angular在几乎每个变更检测周期都会调用不纯管道。 过滤和特殊分类是昂贵操作。...Angular团队和许多经验丰富Angular开发人员强烈建议将过滤和排序逻辑移植组件本身

6.3K20

AngularDart 4.0 高级-结构指令 顶

您将在本指南中学习星号(*)是一种便利符号,字符串是一种微型语法,而不是通常模板表达式。 Angular将这个符号解析成一个围绕宿主元素及其后代标记。...三种常见内置结构指令 - NgIf,NgFor和NgSwitch ... - 在模板语法指南中进行了描述,并在整个Angular文档示例中进行了介绍。...当条件为false时,NgIf从DOM删除它宿主元素,将它从DOM事件(它所依附)中分离出来,将组件从Angular变化检测中分离出来并销毁它。 组件和DOM节点可以被垃圾收集并释放内存。...*ngFor内部详解 Angular以类似的方式将*ngFor转换为从星号(*)语法通过模板属性模板元素。...您可以在分配给ngFor字符串启用这些功能,这是您在Angularmicrosyntax编写

16K20

Angular 6.x 快速入门

第一节 - Angular 环境搭建 基础要求 Node.js Git Angular 开发环境 安装 Angular CLI (可选) $ npm install -g @angular/cli 检测...name = 'Angular'; } 定义数据接口 在 TypeScript 接口是一个非常灵活概念,除了可用于对类一部分行为进行抽象外,也可用于对「对象形状(Shape)」进行描述...实际项目中,最常用指令是 ngIf 和 ngFor 指令。... ngFor 指令简介 该指令用于基于可迭代对象每一项创建相应模板。它与 AngularJS 1.x ng-repeat 指令功能是等价。...router-outlet 指令 该指令用于告诉 Angular 在哪里加载组件,当 Angular 路由匹配到响应路径,并成功找到需要加载组件时,它将动态创建对应组件,并将其作为兄弟元素,插入

14.1K20

Angular快速学习笔记(3) -- 组件与模板

显示数据 在 Angular 中最典型数据显示方式,就是把 HTML 模板控件绑定 Angular 组件属性。...*ngForAngular “迭代”指令。...在正常 HTML 开发过程,你使用 HTML 元素来创建视觉结构, 通过把字符串常量设置元素 attribute 来修改那些元素。...在这种模式下,有类型变量默认是不允许 null 或 undefined 值,如果有赋值变量,或者试图把 null 或 undefined 赋值给不允许为空变量,类型检查器就会抛出一个错误 Angular...ngDoCheck() 检测,并在发生 Angular 无法或不愿意自己检测变化时作出反应。在每个 Angular 变更检测周期中调用,ngOnChanges() 和 ngOnInit() 之后。

15.2K30

AngularDart4.0 指南- 模板语法二 顶

要监听值更改,代码会绑定输入框输入事件。 当用户进行更改时,将引发输入事件,绑定在包含DOM事件对象$event上下文中执行语句。...这些元素所有组件都保留在内存Angular可能会继续检查更改。 您应用可能会占用相当可观计算资源,会降低用户不可见性能。...分配给* ngFor文本是指导迭代器进程指令。 *ngFor微语法 分配给* ngFor字符串不是模板表达式。 这是一种微语法 - Angular解释一种小语言。...* ngFor与index(索引) NgFor指令上下文index属性返回每个迭代项目的从零开始索引。 您可以捕获模板输入变量index,并在模板中使用它。...它别无选择,只能拆除旧DOM元素并插入所有新DOM元素。 Angular可以通过trackBy避免这种流失。 向组件添加一个返回NgFor应跟踪值方法。 在这个例子,这个值就是英雄ID。

29.9K20

【Appetite】ionic3实录(七)次页实现及分析解决问题【下】

值更新会影响dom,所以应该在数据更新从而使得dom更新完成后再调用initSwiper方法。...angular检测机制是基于一定条件和时间,在给this.vm.dessertSlides赋值,dom还没更新完成就调用initSwiper方法不一定会获得想要结果,所以在此之前调用手动检测方法...也就是说,前者只会初始化一次,而后两者每次显示都需要重新初始化,进一步说,若使用后两者方式,对于这里用到swiper,它不是一个angular封装起来组件,不会自动初始化,我们每次显示它时都需要显式调用一下...ts把initSwiper方法相关内容移除: import { Component, ViewChild, ElementRef, ChangeDetectorRef } from '@angular...数据正确应用 对比上一节实际效果图,会发现这里只显示了两个图片,什么原因呢?

1.4K20

Angular 结构指令模式 - 它们是什么且怎么使用

Angular 结构指令是什么? Angular 结构指令是能够更改 DOM 结构指令。这些指令可以添加、移除或者替换元素。结构指令在其名字之前都有 * 符号。...在 Angular ,有三种标准结构化指令。...这会将其转换为方括号 [] 属性绑定,比如 [ngIf]。 其余部分,包含类名,插入 里。...当条件值是 true 时候,相关元素就会被渲染 DOM ,其余元素将被忽略。如果没有元素匹配,则渲染 *ngSwitchDefault 元素 DOM 。...Angular 我们什么时候需要用结构指令呢? 如果你想在 DOM 添加或者移除一个元素时候,你就应该使用结构指令。 当然,我们还可以使用它们来更改元素 CSS 样式,或者添加事件监听器。

3.8K20

AngularDart4.0 指南- 模板语法一 顶

{{hero.name}}英雄是指变量输入变量,而不是组件属性。 模板表达式不能引用静态属性,也不能引用顶层变量或函数,如来自dart:htmlwindow 或document 。...快速执行 Angular在每个更改检测周期后执行模板表达式。 更改检测周期由许多异步活动触发,如承诺分辨率,http结果,计时器事件,按键和鼠标移动。...偶尔布尔否定(!)可以。  另外, 将应用和业务逻辑放到到组件本身,在那里它将更容易开发和测试。 幂等性 幂等表达式是理想,因为它没有副作用,并且改善了Angular变化检测性能。...Angular可能会或可能不会显示更改值。Angular可能会检测更改并发出警告错误。通常来说,保留数据属性和方法返回值就够了。...它不允许带脚本标记HTML泄露浏览器,既不能使用插值也不能使用属性绑定。 <!

5.1K10

Angular v8 发布!来看看有什么新功能

由于 Angular 大量底层部分已经为此进行了更改,因此 Angular 团队特别注意与以前 Angular 版本兼容性:在切换到 Ivy 之后,现有的程序应该能够像以前一样工作。...虽然它们在早期版本中被用于组件请求不在结构指令内元素,如 ngIf 或 ngFor,但查询结果已在 ngOnInit 可用。...为实现这一目标,Angular 团队扩展了Angular Location 服务可能性,从而为 AngularJS $location 提供了替代。...出于这个原因,在 Location 服务添加了用于监视URL更改新方法 onUrlChange 以及其他修改: 1export class AppComponent { 2 constructor...结论 Angular团队再次表达了自己观点:迁移到新 Angular 版本很容易,并且不需要进行大更改。使得使用 Google SPA 框架更加舒适。

3K30

AngularDart4.0 指南-体系结构概述 顶

HeroDetailComponent(代码显示)显示关于特定英雄详情,这是用户从HeroListComponent提供列表中选择英雄。...添加绑定标记模板HTML告诉Angular如何连接双方。 如图所示,有四种形式数据绑定语法。 每个表单都有一个方向 - 从DOMDOM,或者在两个方向。..."> 在双向绑定,与属性绑定一样,数据属性值将从组件输入输入框。...用户更改也会返回到组件,将属性重置为最新值,就像事件绑定一样。 Angular在每个JavaScript事件循环中处理所有数据绑定,从应用程序组件树所有子组件。 ?...Router:在客户端应用程序从一个页面另一个页面进行导航,而不会离开浏览器 Testing:为您应用编写组件测试和端端测试。

7.9K30

AngularDart4.0 指南- 表单 顶

禁用窗体提交按钮,直到窗体有效。 建立 按照设置说明创建一个名为表单新项目。 添加angular_forms Angular表单功能位于angular_forms库,该库位于其自己。...继续看看这是如何工作。 刷新浏览器。 你会看到一个简单,没有样式表单。 表单样式 一般CSS类container和btn来自Bootstrap。...你会看到一个样式化表单! 使用* ngFor添加powers 英雄必须从一个固定机构批准权力列表中选择一个超级大国。 您在内部维护该列表(在HeroFormComponent)。...您将在表单添加一个select,并使用ngFor(先前在“显示数据”页面中看到一种技术)将选项绑定powers列表。...靠近表单顶部诊断确认所有的更改都反映在model。 从模板删除诊断绑定,因为它已经达到了目的。 根据控制状态给出视觉反馈 使用CSS和类绑定,您可以更改表单控件外观以反映其状态。

17.4K30

Angular: 最佳实践

="let user of users" [user]="user"> 复制代码 这在父组件写更少代码,让后允许委托任何重复逻辑子组件。...服务 Services 服务是 Angular 业务逻辑存放和数据处理方案。拥有提供数据访问、数据操作和其他可重用逻辑结构良好服务非常重要。...从模版组件方法委托比原始逻辑更难。请注意,这里我用了比原始更难词语,而不是复杂这个词。这是因为除了检查直接条件语句之外,任何逻辑都应该写在组件类方法,而不是写在模版。...比如,你想在模版正确填写表单控件添加 has-error 类(也就是说并非所有的校验都通过)。...所以本文着重介绍 Angular 应用 TypeScript 内容。 希望本文能够帮助你编写更干净代码,帮你更好组织你应用结构。

2.8K40

AngularDart4.0 英雄之旅-教程-04明细 顶

如果您结构不匹配,请返回该页面以弄清楚您错过了什么。 ? 如果该应用尚未运行,请启动该应用。 当您进行更改时,请通过重新加载浏览器窗口来保持运行。...{ final int id; String name; Hero(this.id, this.name); } 回到应用程序组件,使用相对路径添加一个import 新创建文件:lib...-- each hero goes here --> 下一步你将添加英雄名字 使用ngFor指令罗列英雄 目标是将组件英雄列表绑定模板,迭代它们,并单独显示它们。...> {{hero.name}} 要在模板中使用Angular指令,需要在组件@Component注解指令参数列出。...在模板,将以下绑定添加到标记: [class.selected]="hero === selectedHero" 当表达式(hero === selectedHero)为true时,Angular

3K30

ionic3升级适配angular5

angular5最新beta版 在ionic3官网建议是更新依赖angular5.0.0版本,而根据上述说明,优先选择做了做了bug修复angular5.0.1版。...更新说明: ---- 更改内容: I18n更改; 内置管道如Date、Currency、Percent更改; 弃用内容: compiler: ngGetContentSelectors()在v4版本被移除...,用SerializerTypes.PRIMITIVE代替; ---- 看上去内容很多,但不要被吓到,因为从内核级别看是改动比较多,但从项目应用上只是个别地方要调整,基本向下兼容,故angular4angular5...在本项目中,因为没有用到那几个内置管道,也没有用到路由,所以主要是调整Http模块: 在4.xHttpClient模块被封装在@angular/common,新HttpClient被封装在@angular.../common/http,更新Http模块后,需要使用HttpClientModule替换原有HttpModule,并在使用http服务时,可以去掉map(res=>res.json())调用,因为新模块已经不再需要了

2.5K40
领券