Question

有许多与此特定错误相关的问题，但错误本身与更改检测和单向流有关，可能由无数问题引起。我读过的问题以及有关上述概念的资源并没有帮助我解决我的特定问题。

（我使用Firebase作为我的数据库与Angularfire2。）这是代码......

构件-profile.component.ts：

@Component({
  selector: 'member-profile',
  templateUrl: './member-profile.component.html',
  styleUrls: ['./member-profile.component.css']
})

export class MemberProfileComponent implements OnInit {
...     
  ngOnInit() {
    this.member = this.memberViewService.getMember(this.uid)
  }
}

member-profile.component.html :(有问题的行）

<div *ngIf="(member | async)?.tierThreeCount > 0" class="badge">

构件-view.component.html：

<ul class="nav nav-tabs">
    <li [class.active]="router.url == '/member-view/member-profile/' + uid"><a routerLink="/member-view/member-profile/{{uid}}">Profile</a></li>
    <li *ngIf="(user | async)?.uid === uid" [class.active]="router.url == '/member-view/member-settings'"><a routerLink="/member-view/member-settings">Settings</a></li>
</ul>
<router-outlet></router-outlet>

构件-view.service.ts：

@Injectable()
export class MemberViewService {
  getMember(uid: string): Observable<any> {
    let results = this.db.object(`members/${uid}`)
    return results
  }
}

member-profile组件显示在member-view之后的<router-outlet></router-outlet>组件中。（这会使前者成为后者的孩子吗？）无论如何，似乎没有任何数据流从member-profile到member-view。 member-profile使用member-view从getMember()服务获取其数据。

但<div *ngIf="(member | async)?.tierThreeCount > 0" class="badge">会导致错误：

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '[object Object]'. Current value: 'false'.

这似乎与逻辑有关，因为{{(member | async )?.tierThreeCount}} ngIf中的实际绑定<div>在删除ngIf时不会触发错误。

更新

移动ngIf检查模板中是否存在节点到ngOnInit生命周期挂钩解决了这个问题。执行此操作的方法是为生命周期钩子中的属性doesNodeExist分配值。然后在模板中，您将检查属性doesNodeExist是否与*ngIf=doesNodeExist一起存在。但是，此解决方案并不理想，因为模板包含多个这些检查。我宁愿不为每张支票创建一个属性。我想了解造成这种情况的原因，而不是。

表情发生了变化

0 个答案: