ExpressionChangedAfterItHasBeenCheckedError один маршрут два компонента - PullRequest
Новая
       4

ExpressionChangedAfterItHasBeenCheckedError один маршрут два компонента

0 голосов
/ 17 января 2019

У меня есть / коучинг маршрут.

Если я супер-администратор, я могу видеть список всех тренеров-администраторов из системы (угадайте правильно, когда вы идете на / коучинг маршрут (нажатием кнопки)). Если я являюсь администратором коуча, я могу видеть список всех коучей из системы. (Опять же, я хочу использовать тот же маршрут / коучинг).

В этом случае я создал 3 компонента: CoachAdminListComponent, CoachListComponent и CoachComponent. HTML-код CoachComponent выглядит следующим образом: 

<app-coach-admin-list
  *ngIf="isCurrentUserSuperAdmin()"
  [items]="coachAdmins$ | async"
  [itemInfo]="coachAdminInfo$ | async"
  [loggedUser]="loggedUser"
  [cachedItems]="allCoachAdmins$ | async"
  [loading]="loading"
  (onSubmit)="handleOnSubmit($event)"
  (onFilter)="handleOnFilter($event)"
  (onMenuItem)="handleOnMenuItem($event)">
</app-coach-admin-list>
<app-coach-list
  *ngIf="!isCurrentUserSuperAdmin()"
  [items]="coaches$ | async"
  [itemInfo]="organisationInfo$ | async"
  [loggedUser]="loggedUser"
  [cachedItems]="allCoaches$ | async"
  [loading]="loading"
  (onSubmit)="handleOnSubmit($event)"
  (onFilter)="handleOnFilter($event)"
  (onMenuItem)="handleOnMenuItem($event)">
 </app-coach-list>

Я понимаю, что это ужасный код, но как я могу отобразить каждый компонент, когда роль удобна для них?

При попытке войти в систему в качестве администратора коуча я получил следующую ошибку: 

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

The coach.module.ts: 

const routes: Routes = [{
 path: 'coaching',
 component: CoachComponent,
 canActivate: [AuthGuard]
}];

Конечно, в компоненте coach есть 2 модуля, включенные в его файл, поэтому я пытаюсь найти способ его визуализации без ошибки, а также в понятной форме?

Спасибо.

1 Ответ

0 голосов
/ 17 января 2019

Попробуйте настроить isCurrentUserSuperAdmin как свойство, а не функцию, установите его в ngOnInit().

Ваш класс компонентов теперь выглядит как 

export class CoachComponent implements OnInit{ 
     isUserSuperAdmin:boolean;

     public ngOnInit(){
            this.isUserSuperAdmin = this.CheckIfSuperAdmin();
     }
     public CheckIfSuperAdmin(){
         //your logic to check if super admin
     }

}
...