时间戳

首页 > 解决方案 > 表达方式变了

angular - 表达方式变了

问题描述

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

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

成员-pro​​file.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-profileto member-view。使用 . 从服务中member-profile获取其数据。member-viewgetMember()

但是<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。但是，此解决方案并不理想，因为模板包含多个此类检查。我宁愿不为每张支票创建一个属性。相反，我想了解是什么原因造成的。

标签： angularangularfire2reactivex

解决方案

推荐阅读