Angular 2 - 表达式在检查后发生了变化

10 浏览
0 Comments

Angular 2 - 表达式在检查后发生了变化

当通过多个子组件的指令传递对象时，我收到以下错误消息：

检查后表达式已更改。之前的值：'true'。当前值：'false'。

模板：


    
详情：{{deliveryrequest.nr}}

请求者组件模板：

                请求者
                    
        

                负责人 {{i + 1}}

人员组件模板：


            
                
                
                    (成功)
                    (错误)
                

                    {{formErrors.nationalnumber}}
            
            
                
            {{person.familyName}}
                
            {{person.givenName}}
                
            {{person.birthDate | stringformat : 'xxxx-xx-xx' }}
                
                {{person.streetName}} {{person.houseNumber}} {{person.houseNumberExtension}}, {{person.postalCode}} {{person.municipalityName}}
                
                {{person.isMinor ? "是" : "否" }}

0

3 答案

0 Comments

Angular 2 - Expression has changed after it was checked问题的出现原因是因为在Angular的变更检测过程中，发现了某些表达式的值在检测之后发生了变化。这可能会导致应用程序的不稳定性和不一致性。

解决这个问题的方法是使用[attr.disabled]代替[disabled]来绑定按钮的disabled属性。通过使用[attr.disabled]，我们可以确保在Angular进行变更检测之后，按钮的disabled属性值不会发生变化。

原始的HTML代码如下：

修改后的HTML代码如下：

通过将[disabled]替换为[attr.disabled]，我们成功解决了Angular 2 - Expression has changed after it was checked的问题。这种解决方法简单且有效，可以确保应用程序的稳定性和一致性。更多关于这个问题的详细信息，可以参考这篇有趣的文章。

0
0 Comments

Angular 2 - Expression has changed after it was checked 是Angular中的一个常见问题。当数据绑定的值在变更检测期间发生改变时，就会抛出该异常。

造成这个问题的原因可能是因为deliveryrequest的改变。例如，在连续调用时，getter返回了不同的值。

解决这个问题的方法是显式地触发变更检测。可以在构造函数中注入ChangeDetectorRef，并在ngOnChanges()方法中调用changeDetectorRef的detectChanges()方法。

需要注意的是，这种方法并不适用于以上示例。解决这个问题的最好方式是尽量避免出现这个异常，但这并不总是可行的。此外，这个异常只会在开发模式下抛出。

更多信息可以查看这个链接：https://stackoverflow.com/questions/34868810/34868896#34868896

在你的应用中，deliveryrequest的值是通过API调用获取的。由于我无法得知你的应用的具体情况，我只能基于我的假设给出一些可能的原因。错误信息并没有明确指出是deliveryrequest引起的问题，只是说有一个字段从true变为false。希望我提供的信息能帮助你进一步调查。如果你能提供更多的代码，将有助于解决问题。

当我移除drr-requester组件时，错误就消失了，所以我认为问题可能出现在那里。我已经更新了帖子。

这个问题可能是由于[ngClass]="{ 'has-error': personForm.controls.nationalnumber.invalid,中的代码引起的，尝试将其改为[ngClass]="{ 'has-error': personForm.get('nationalnumber').invalid,。这是一个常见的原因，但我不记得什么是避免它的最佳方法。

很抱歉回复晚了，但这个方法也没有解决问题。

很抱歉，我不知道其他解决办法。

在请求者组件中，我做了以下操作：[required]="true"。为了验证目的，我检查该字段是否为必填项。正是在这段代码中，错误被抛出。

在ngOnInit中，我检查这个属性是true还是false。例如：if (!this.required)。有什么想法吗？

很抱歉，我没有想法。

我在ngSwitch改变时也遇到了相同的错误，所以可能是在*ngIf改变的同时触发了错误。你解决问题了吗？

0
0 Comments

Angular 2 - Expression has changed after it was checked 是一个常见的错误，它产生的原因是在Angular的变化检测机制中出现了问题。下面将介绍这个问题的出现原因以及解决方法。

在Angular中，变化检测是用来检测模板中的表达式是否发生变化的机制。当应用程序的状态发生变化时，Angular会自动检测并更新视图。然而，有时候在变化检测过程中，会出现表达式在检测之后发生了变化的情况，这就会触发 Angular 抛出 "Expression has changed after it was checked" 错误。

这个错误的出现原因是由于变化检测机制的设计原则所导致的。Angular的变化检测是通过两次循环来实现的，第一次循环用于检测变化并更新视图，第二次循环用于检测变化是否稳定。如果在第一次循环中，发现了表达式的值发生了变化，那么就会触发这个错误。

为了解决这个问题，我们可以采用 ChangeDetectionStrategy 的方式来改变变化检测的策略。ChangeDetectionStrategy 是 Angular 核心库中提供的一个枚举类型，它定义了变化检测的策略。在组件中添加 ChangeDetectionStrategy.OnPush 策略，可以告诉 Angular 只在输入属性发生变化时才进行变化检测。

下面是一个示例代码，展示了如何使用 ChangeDetectionStrategy.OnPush 来解决这个问题：

import { Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'page1',
  templateUrl: 'page1.html',
})
export class Page1Component {
  // 组件的逻辑代码
}

在上面的代码中，我们通过在组件装饰器中添加 changeDetection: ChangeDetectionStrategy.OnPush 来指定了变化检测的策略为 OnPush。这样一来，只有当输入属性发生变化时，Angular 才会进行变化检测，从而避免了 "Expression has changed after it was checked" 错误的出现。

总结起来，"Expression has changed after it was checked" 错误是由于 Angular 变化检测机制中的设计原则导致的。通过改变变化检测策略为 ChangeDetectionStrategy.OnPush，可以解决这个错误。希望本文对你理解和解决这个问题有所帮助。

0