Выражение изменилось - PullRequest
Новая
       9

Выражение изменилось

0 голосов
/ 26 апреля 2018

Есть множество вопросов, связанных с этой конкретной ошибкой, но сама ошибка связана с обнаружением изменений и однонаправленным потоком и может быть вызвана множеством проблем.Вопросы, которые я прочитал, и ресурсы, касающиеся вышеупомянутых концепций, до сих пор не помогли мне решить мою конкретную проблему.

(я использую Firebase в качестве базы данных для Angularfire2.) Вот код ...

member-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">

member-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>

member-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.Однако это решение не является идеальным, поскольку шаблон содержит несколько таких проверок.Я бы не хотел создавать свойство для каждой проверки.Вместо этого я хотел бы понять, что является причиной этого.

...