angular - ngIf 表达式检查后发生了变化

Question

由于我的代码很长，我将用一个简化的例子来解释我的问题。

我想在 isFetching 或 isDownloading 之一为真时显示某个 div。

<div *ngIf="(isFetching || isDownloading)">
  My div element is here
</div>

在我的程序开始时，它们都是真的，所以应该显示 div。在上面的 div 下方，我还有其他元素，这些元素在 isFetching 更改为 false 后显示在 View 中。 (isFetching 在从数据库中获取完成后更改为 false。)在 isFetching 更改为 false 之后并呈现元素，在下载这些元素的最后一个元素(它是图像)后，我将 isDownloading 更改为 false。

当isFetching和isDownloading都为false时，这就是我要隐藏div元素的时候。

但是，我刚才解释的代码给我这个错误:

Expression has changed after it was checked. Previous value: 'ngIf: true'. Current value: 'ngIf: false'.

我似乎不明白为什么会出现此问题？我的逻辑有什么问题？如何在不出现此错误的情况下获得预期的结果？

编辑:

这段代码在我的类的构造函数中:

firebase.database().ref('/users/' + this.userId).once('value').then(function(snapshot) {
  this.username = (snapshot.val() && snapshot.val().username) || 'Anonymous';
  this.isFetching = false;
});

isFetching 更改为false 后。我的 .html 中还有其他元素被渲染。然后在加载这些元素的最后一个元素(图像)后调用此代码 (load)="latestElementLoaded()"。

latestElementLoaded(){
   this.isDownloading = false;
}

Answer 1

您可能需要考虑另一种模式，使用可观察对象，它可以简化您的代码(AngularFire 值得研究):

this.data$ = this.angularFirestore.doc('some/path').valueChanges();

这会将您的数据作为可观察对象获取(这只是演示代码——请检查实际语法)。将它放在 ngOnInit 中，而不是构造函数中。不要乱用 .once 或快照或其他样板文件。

现在，在你的模板中，你可以写

<div *ngIf="data$ | async as data; else notFetched">
  Data is {{data | json}}
  <ng-template #notFetched>Data is not fetched yet..wait...</ng-template>
</div>

这完全消除了对 isFetching 类标志的需求。

关于您的代码:

firebase.database().ref('/users/' + this.userId).once('value').then(function(snapshot) {
  this.username = (snapshot.val() && snapshot.val().username) || 'Anonymous';
  this.isFetching = false;
});

我完全不知道它是如何工作的，因为回调函数 (function(snapshot)) 中的 this 可能是未定义的，给你一个运行时错误。

我不是 Angular 内部专家，但我怀疑导致您报告的错误的原因是以下事件序列:

1. 实例化组件并运行构造函数。
2. Firebase 查询开始。
调用
3. ngOnInit 并检查检测到的变化变量。 isFetching 此时仍然为真。
4. Angular 在构建 View 和您拥有的方面做了更多工作。
5. 与此同时，Firebase 查询完成，并且“isFetching”设置为 false。
6. 在完成这一轮渲染之前，Angular 会再检查一次(它在测试模式下执行此操作)以确保没有任何意外更改。但它有!

这整个问题是由于将 firebase 查询逻辑放在构造函数中引起的，如评论中所述。构造函数应严格限于基本初始化。它们不应该包含业务逻辑，绝对不应该包含异步的东西。