Angular ngFor类绑定ExpressionChangedAfterItHasBeenCheckedError
是一个常见的错误，它通常出现在使用ngFor指令时，当绑定的数据发生变化时，Angular会检测到变化并更新视图。然而，有时候在更新视图之前，绑定的数据又发生了变化，导致出现这个错误。
这个错误的原因是Angular的变更检测机制。Angular使用了一种叫做"脏检查"的机制来检测数据的变化，并更新视图。当数据发生变化时，Angular会遍历所有的绑定，检查是否有变化，然后更新视图。但是，如果在更新视图之前，又有其他的数据变化，就会导致这个错误的出现。
解决这个错误的方法有几种：
- 使用ChangeDetectorRef手动触发变更检测：在组件中注入ChangeDetectorRef，并在数据变化后手动调用它的detectChanges()方法，强制触发变更检测。
- 使用setTimeout延迟更新：将数据变化的代码包裹在setTimeout函数中，将其放入下一个JavaScript事件循环中执行，这样可以避免在变更检测期间发生数据变化。
- 使用ngAfterViewInit钩子函数：将数据变化的代码放在ngAfterViewInit钩子函数中执行，确保在视图初始化完成后再进行数据变化。
- 使用trackBy函数：在ngFor指令中使用trackBy函数来指定如何跟踪列表中的每个项的唯一标识。这样，当数据发生变化时，Angular会根据trackBy函数的返回值来判断是否需要更新视图。
总结起来，解决ngFor类绑定ExpressionChangedAfterItHasBeenCheckedError错误的关键是要避免在变更检测期间发生数据变化。可以通过手动触发变更检测、延迟更新、在适当的钩子函数中执行代码或使用trackBy函数来解决这个问题。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
- 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iothub
- 移动推送服务（腾讯移动推送）：https://cloud.tencent.com/product/umeng
- 对象存储（COS）：https://cloud.tencent.com/product/cos
- 区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe
相关·内容
1回答
数据绑定不工作角2
angular、typescript、angular2-routing
无法理解为什么数据不绑定在ui上，试图使用*ngFor绑定数组，但是当数据存在于数组中时，ui上不会显示任何内容。在这里，组件代码：
import { Component, Injector, OnInit, OnDestroy, Pipe } from '@angular/core'
import { AdvancedPostsService } from '../../services/advanced.posts.service'
import { SpinnerService } from '../../services/spinner.serv
浏览 5提问于2017-04-23得票数 1
回答已采纳
2回答
如何手动触发变更事件- angular2
angular、typescript、angular2-template、angular2-directives
给定以下组件：
@Component({
selector: 'compA',
template: template: `<compB [item]=item></compB>`
})
export class CompA {
item:any;
updateItem():void {
item[name] = "updated name";
}
}
@Component({
selector: 'compB',
template: templa
浏览 0提问于2017-07-06得票数 25
回答已采纳
1回答
是否在web请求触发后更新视图？
angular
使用Angular 5，我将一个选定的对象属性ID传递给另一个组件中的函数getqr()，该组件触发web请求。即使请求及其结果被正确记录，结果也不会显示在保持其原始状态的视图中。如何让显示结果的组件反映所选内容？
可供选择的HTML：
<table>
<tr>
<th></th>
<th>Document Group</th>
<th>Title</th>
<th>Description</th>
</tr>
<
浏览 0提问于2018-02-21得票数 0
2回答
表达式中的Angular2 NgFor绑定数组
angular、typescript
在ngfor循环中使用的数组，当它被更新时，如何让Angular2重新运行该表达式？目前，它不会输出任何东西，因为它在初始运行时带有一个空数组--一旦更新(数组已被更改)，ngfor表达式就不会重新运行--这是所需的功能。这是怎么做的？
例如，在组件HTML中；
<option *ngFor="let user of users" [value]="user.id">{{user.name}}</option>
在组件TS中，我们声明了一个属性；
users: IUser[] = [];
在ngOnInit中，我们调用一个TS服务，该服务
浏览 2提问于2016-12-23得票数 3
回答已采纳
2回答
为什么模型不更新？
angular、angular5
我有一个定制的功能：
public changeClass() {
this.studyPlan = this.studyPlanClone.slice();
if (this.filter.classNumber) {
this.studyPlan = this.studyPlan.filter(study => study.classNumber == this.filter.classNumber);
}
console.log(this.studyPlan);
}
HTML模板是：
<tr *ngFor="let i
浏览 0提问于2018-08-27得票数 0
回答已采纳
2回答
ChangeDetectionStrategy.OnPush会打破ControlValueAccessor的禁用状态
angular、typescript、angular-components、angular-forms
在我的Angular应用程序中，我通过实现接口创建了一个自定义表单元素。
因此，在我的组件中，我正确地实现了该接口的所有方法，包括setDisabledState
/**
* This function is called when the control status changes to or from "disabled".
* Depending on the value, it will enable or disable the appropriate DOM element.
*
* @param isDisabled
*/
setDisabledSta
浏览 5提问于2018-08-22得票数 5
回答已采纳
10回答
Angular2：*ngFor在更新数组时不更新
angular、angular2-changedetection
我有一个对象数组(让我们称之为arr)。在我的组件在(change)方法中的一个输入中，我修改了这些对象的一个属性，但是在视图(*ngFor)中没有任何改变。我看到Angular2更改检测没有检查数组或对象的内容，所以我尝试了以下方法：
this.arr = this.arr.slice();
和
this.arr = [...this.arr];
但是视图没有改变，它仍然显示了旧的属性。在使用(change)的console.log()方法中，我得到了正确的数组。奇怪，但这个很管用：this.arr = [];，我也试过NgZone和markForCheck()。
浏览 15提问于2017-07-21得票数 50
回答已采纳
2回答
角-标签的“名称”属性-选择
angular、typescript
我正在创建一个角度的形式(见下文)。由于我正在创建的页面的逻辑，userEntitiesRoles数组可能会发生变化。因此，我需要确保为标记name提供唯一的mat-select属性，否则就会遇到问题。这就是为什么我尝试使用随机字符串的原因，下面报告的类型记录代码。然而，通过这种方式，在Chrome的控制台中，我得到了您在文章末尾发现的错误，我不明白为什么。你有什么建议吗？
html:
<div *ngFor="let item of userEntitiesRoles">
<mat-form-field>
<m
浏览 3提问于2021-03-31得票数 0
回答已采纳
2回答
我的组件在推送后不会更新数据。可观察不起作用
javascript、angular、ionic-framework
我有以下疑问。
我有两个组件和一个服务。
其中一个组件(组件A)显示使用for创建的测试记录。
第二个组件(组件B)是用于输入更多测试数据的表单。
数据存储在服务中的集合中。
我创建了一个可观察的视图，以反映组件A中对服务所做的更改。
我的问题是更改没有更新，但似乎推送已经成功执行，数据没有被“刷新”。
服务
import { Injectable } from '@angular/core';
import { diagnosticosUsers, User, UserData } from '../shared/user.interface';
import
浏览 5提问于2020-09-24得票数 0
2回答
更改检测不注册数据更改
angular、angular-http
我有一个html结构，在一个组件中有一个组件(忘记了正确的词)。
基本工作方式如下(很大程度上简化)：
主要html：
<div *ngFor="let item of data">
<app-item [item]="item"></app-item>
</div>
<button (click)="addItem()">Add</button>
项目html：
<div>{{item.name}}</div>
<button (cli
浏览 0提问于2017-08-04得票数 17
回答已采纳
1回答
角度模板中的Lodash效率
performance、angular、templates、view、lodash
我有一个Angular 2.x应用程序，它在组件中利用了Lodash，我也在考虑在视图模板中使用它。
我注意到Angular (从1.x切换到2.x)放弃了对的一些更密集的视图模板管道(如filter和orderBy)的支持，现在它说“在组件中做它”。
在视图中使用Lodash是否应该遵循相同的建议？为什么我不应该在视图中使用Lodash (或类似的库)，有什么“性能原因”吗？有没有没有影响的时候和有影响的时候？
下面是一些示例用法：
<div *ngIf="_.isEmpty(someVariable)">
....
</div>
<div
浏览 10提问于2017-06-27得票数 0
1回答
在角度8中删除/降低按下/鼠标按下/触摸开始延迟？
angular、delay、angular8、mousedown、touchstart
我正在使用Angular 8 (angular.io)开发一个应用程序，注意到press/mousedown/touchstart事件在触发之前会有延迟，或者至少在视图中看到任何响应之前会有延迟。有没有办法降低或消除这种延迟？这在我的笔记本电脑和触摸屏面板上都会发生，所以我知道这不是特定于设备的。
浏览 22提问于2019-09-28得票数 0
2回答
角度2-如何刷新我的视图数据？
angular
我是新的角2，我需要一些关于我的个人项目的建议。我有两个组件，一个编队列表和一个表单来更新我的数据。我使用服务调用来更新我的数据和显示我的编队列表。我的视图上的数据更新有问题，但我通过添加一个计时器来刷新数据来解决这个问题。我不喜欢这个解决方案，因为我的服务在形成列表接口中每秒钟都会被调用:/
我的问题:在我的情况下，有什么更好的方法来更新我的观点呢？
Thx预先
浏览 8提问于2017-11-13得票数 2
回答已采纳
1回答
在角度2中流的变化检测？
javascript、angular、buffer、angular2-changedetection
在组件中读取流时，我无法赋值变量。
import { Component, OnInit } from '@angular/core';
var fs: any = require('fs');
@Component({
selector: 'stream-cmp',
templateUrl: 'app/view/stream.html',
styleUrls: ['./app/view/stream.css'],
})
export class StreamCmp {
private _an
浏览 0提问于2016-07-21得票数 0
2回答
Angular5模板绑定，多次调用回调函数
angular、angular5、angular-template
我试图用一个包含columns definition及其data array的结构化数据实现一个网格组件。
在每个列的定义中都有一个callback函数，用于自定义显示该列的值。
在每个callback内部，它调用一个console.log()来显示回调函数将被调用多少次。
我不知道为什么回调函数在开始时调用了四次，在changeSort()事件之后触发了two times !！请让我知道。
我编写了以下表格组件：
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector
浏览 2提问于2018-02-24得票数 4
3回答
更新AfterViewInit中的布尔值会导致“表达式检查后发生更改”
angular、angular2-changedetection
我有一个简单的警报组件，我正在视图中动态创建它。由于它是动态创建的，所以我设置了一个选项，以便在初始化警报后自动显示它。
虽然它是有效的，但我想了解为什么在这种特殊情况下必须手动触发更改检测。
代码：
export class OverlayMessageComponent implements AfterViewInit {
...
ngAfterViewInit() {
if(this.autoShow) {
this.show();
}
this.changeDetector.detectChang
浏览 2提问于2017-07-10得票数 18
回答已采纳
3回答
如何在nativeElements上访问ngOnInit？
javascript、angular
假设在我的角代码中，我可以通过viewChild('someDiv')或constructor(private elem: ElementRef){}.Whenever访问html元素，我的角组件被加载，我想要访问该元素的一些属性，这样我就可以将它存储在Variable.Ex中--我希望在加载该组件之后立即获得该元素的宽度，所以我的代码是
@ViewChild('someDiv') someDiv: ElementRef;
someDivWidth;
ngOnInit(){
someDivWidth = this.someDiv.nativeElement.c
浏览 11提问于2020-09-27得票数 1
回答已采纳
1回答
从外部更新角度视图
angular、zones
我在window对象上有一个函数，可以更改我的angular4应用程序中的数据，但是，直到我单击angular应用程序中的一个输入，视图才会更新。有没有办法让它立即更新？
我相信这与角度区域有关，对吗？
代码：
在下面的代码中，vm引用了我的Angular组件。
window.callback = function(data) {
vm.setKey(data.result);
}
下面的函数在Angular组件中，并且正确地设置了数据，但在视图中不会更新，直到再次与应用程序交互。
setKey(result) {
this.ke
浏览 7提问于2017-07-27得票数 1
回答已采纳
6回答
角4-“表达式在检查后更改”错误时使用NG-IF
javascript、angular、typescript、rxjs
我设置了一个service来跟踪登录用户。该服务返回一个可观察的组件，并通知subscribe给它的所有组件(到目前为止，只有一个组件订阅它)。
服务：
private subject = new Subject<any>();
sendMessage(message: boolean) {
this.subject.next( message );
}
getMessage(): Observable<any> {
return this.subject.asObservable();
}
根应用程序组件：(此组件订阅可观察到的)
ngAfterVi
浏览 10提问于2017-11-01得票数 14
回答已采纳
2回答
Flickity在我使用*NgFor时停止工作
angular、angular2-directives、flickity
我正在尝试使用Flickity在我正在构建的一个角度应用程序。这里是，我也知道ngx闪烁，但我不想这样，因为它还没有准备好生产。
下面的代码可以工作。
<div class="carousel">
<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
<div class="carousel-cell">...</div>
浏览 8提问于2021-02-16得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
