表达式在被检查后发生了变化。之前的值为:'ngTemplateOutlet: undefined'。当前的值为:'ngTemplateOutlet: [object Object]'。

12 浏览
0 Comments

表达式在被检查后发生了变化。之前的值为:'ngTemplateOutlet: undefined'。当前的值为:'ngTemplateOutlet: [object Object]'。

出现了这样的错误:

错误:ExpressionChangedAfterItHasBeenCheckedError:表达式在检查后已更改。先前的值为:'ngTemplateOutlet:undefined'。当前值为:'ngTemplateOutlet:[object Object]'。

在viewDebugError(core.js:9775)中

在expressionChangedAfterItHasBeenCheckedError(core.js:9753)中

在checkBindingNoChanges(core.js:9920)中

在checkNoChangesNodeInline(core.js:13970)中

在checkNoChangesNode(core.js:13942)中

在debugCheckNoChangesNode(core.js:14771)中

在debugCheckDirectivesFn(core.js:14673)中

在Object.eval [as updateDirectives](ShowEventComponent.html:73)中

在Object.debugUpdateDirectives [as updateDirectives](core.js:14655)中

在checkNoChangesView(core.js:13780)中

这是由于以下原因:


    
    

我该如何修复它?

我使用的是Angular 5.2.0,rxjs 5.5.6。

0
0 Comments

在检查后,表达式发生了变化。之前的值是'ngTemplateOutlet: undefined',现在的值是'ngTemplateOutlet: [object Object]'。这个问题的出现是因为在模板中调用函数会导致函数被重复调用,这使得调试困难并且性能开销大。解决方法之一是使用setTimeout将函数包裹起来,如下所示:

setTimeout(() => {
    yourTemplateLoadingMechanism();
});

但一般来说,我建议避免在模板中调用函数。相反,你可以预先加载所有模板,并像通常一样以双向绑定的方式提供它们,甚至可以使用rxjs的Observables与async关键字来更有效地解决你的问题。

0
0 Comments

表达式在检查后发生了变化。先前的值为'ngTemplateOutlet: undefined',当前的值为'ngTemplateOutlet: [object Object]'。这个问题与变更检测有关。可以通过使用ChangeDetectorRef的detectChanges()方法来解决这个问题。需要实现AfterViewInit接口。这个方法起初可能不会立即生效,因为Angular有一种奇怪的内部缓存系统,需要给它一些时间。

解决方法如下:

constructor(private cdr: ChangeDetectorRef) {}
ngOnInit() {}
ngAfterViewInit(): void {
  this.cdr.detectChanges();
}

这样就可以解决问题了。更多关于变更检测的信息可以在这里阅读。

0
0 Comments

原因:

出现这个问题的原因是在html中有一个方法设置了[ngTemplateOutlet]。这导致每次进行变更检测时都会运行该方法,而实际上只有在第一次运行时该方法返回的TemplateRef是未定义的。

解决方法:

有多种方法可以解决这个问题。首先,需要在不使用方法的情况下设置[ngTemplateOutlet]。可以使用组件的Observable或组件字段来实现。其次,还需要在适当的时机设置字段或Observable。可以在ngOnInit中使用setTimeout()将设置字段的代码包裹起来,或者如果使用Observable,则可以使用rxjs的delay(0)延迟设置。

文章内容如下:

在开发模式下,我最近遇到了一个类似的问题,但是并没有找到太多的帮助,所以我想提供一些帮助。

首先,这只在开发模式下出现,但这是一个严重的问题。当Angular运行变更检测时,它会跟踪所有绑定的值(例如ngTemplateOutlet),然后将该值与变更检测周期结束后的值进行比较。

你之所以会得到这个错误,是因为你在html中有一个方法设置了[ngTemplateOutlet]。这导致每次进行变更检测时都会运行该方法。这可能是方法运行的5到10倍,这是不理想的。

第一次运行时,值被设置为undefined,在后续的循环中,该值会被更新。我猜测loadTemplate返回的是一个TemplateRef,但是当方法第一次运行时,该TemplateRef未定义,这就是错误的原因。

有很多种方法可以解决这个问题,但是我需要看一下你的component.ts代码。但是有两个变化是必须的。首先,你需要在不使用方法的情况下设置[ngTemplateOutlet]。你可以使用组件的Observable或组件字段来实现。但是其次,你还需要在正确的时机设置字段或Observable。你希望延迟到模板定义之后再设置它。你可以在ngOnInit中使用setTimeout()将设置字段的代码包裹起来,或者如果使用Observable,则可以使用rxjs的delay(0)延迟设置。

再次强调,我需要看到loadTemplate(user)中的逻辑和component.ts代码才能确切地说明如何安排它。

你还可以从父组件向该组件输入所需的数据,然后在[ngTemplate]之后使用该数据进行逻辑处理。

0