Получение разрешений на пространство Laravel — ExpressionChangedAfterItHasBeenCheckedError ⇐ Javascript

[Anonymous]

Я использую Laravel в качестве REST API.
Мой интерфейс должен отображать

• Все разрешения
• Все роли
• Все роли с их конкретными разрешениями

Мои ошибки (F12)

Код: Выделить всё

(11) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
installHook.js:1 ERROR RuntimeError: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'can_accessDashboard'. Expression location: _Dashboard component It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook? Find more at https://v21.angular.dev/errors/NG0100
at Dashboard_For_12_Template (component?c=src%2Fap…1770823049874:27:19)
dashboard.ts:46
(4) [{…}, {…}, {…}, {…}]
installHook.js:1 ERROR RuntimeError: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'Developer'. Expression location: _Dashboard component It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook? Find more at https://v21.angular.dev/errors/NG0100
at Dashboard_For_8_Template (component?c=src%2Fap…1770823049874:15:19)
dashboard.ts:56
{roles: Array(4)}
installHook.js:1 ERROR RuntimeError: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'Developer'. Expression location: _Dashboard component It seems like the view has been created after its parent and its children have been dirty checked.  Has it been created in a change detection hook? Find more at https://v21.angular.dev/errors/NG0100
at Dashboard_For_8_Template (component?c=src%2Fap…1770823049874:15:19)

Стек:

• Angular v21
• Laravel v12
  
  Sanctum
• Spatie для системы разрешений и ролей

Данные заполнителя
Бэкенд правильно отправляет данные, например:

Код: Выделить всё

0 :  {id: 1, name: 'permission', guard_name: 'web', created_at: '2026-02-11T14:02:10.000000Z', updated_at: '2026-02-11T14:02:10.000000Z'}

Мои файлы:
FRONTEND

permissionRoleDatabase

Код: Выделить всё

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from '../../../../../environments/environment';

@Injectable({
providedIn: 'root',
})
export class PermissionRoleDatabase {

constructor(
private http: HttpClient
) {}

public getAllPermissions(): Observable {
const url = environment.apiURL + '/getAllPermissions';
return this.http.get(url);
}

public getAllRoles(): Observable {
const url = environment.apiURL + '/getAllRoles';
return this.http.get(url);

}

public getUserPermissions(): Observable {
const url = environment.apiURL + '/getUserPermissions';
return this.http.get(url);

}

public getAllRolesWithPermissions(): Observable {
const url = environment.apiURL + '/getAllRolesWithPermissions';
return this.http.get(url);
}

}

dashboard.ts

Код: Выделить всё

import { Component, inject, PLATFORM_ID } from '@angular/core';
import { MatTabsModule } from '@angular/material/tabs';

import { PermissionRoleDatabase } from '../../shared/services/permission/database/permission.database';

import { permissionModel } from './models/allPermissions.model';
import { roleModel } from './models/allRoles.model';
import { rolePermissionModel } from './models/rolePermissions.model';
import { isPlatformBrowser } from '@angular/common';

@Component({
selector: 'app-dashboard',
imports: [MatTabsModule],
templateUrl: './dashboard.html',
styleUrl: './dashboard.scss',
})
export class Dashboard {

private permissionRoleDatabase = inject(PermissionRoleDatabase);
private platformId = inject(PLATFORM_ID);

protected allPermissions: permissionModel[] = [];
protected allRoles: roleModel[] = [];
protected rolePermissions: rolePermissionModel[] = [];

ngOnInit() {
if (!isPlatformBrowser(this.platformId)) return;

this.getAllPerms();
}

private getAllPerms(): void {
this.permissionRoleDatabase.getAllPermissions().subscribe({
next: (res) => {
this.allPermissions = res;
console.log(res);
},
error: (err) => {
console.error('Error getting Permissions', err);
},
});

this.permissionRoleDatabase.getAllRoles().subscribe({
next: (res) => {
this.allRoles = res;
console.log(res);
},
error: (err) => {
console.error('Error getting Roles', err);
},
});

this.permissionRoleDatabase.getAllRolesWithPermissions().subscribe({
next: (res) => {
this.rolePermissions = res;
console.log(res);
},
error: (err) => {
console.error('Error getting Roles with Permissions', err);
},
});
}

}

dashboard.html

Код: Выделить всё

i dunno lol





@for (data of allRoles; track data.id ) {
[*]
{{ data.name }}

}





@for (data of allPermissions; track data.id ) {
[*]
{{ data.name }}

}

Что я пробовал:

• поместите мой getAllPerms() в конструктор.
• Поместите мой getAllPerms() в ngAfterContentInit.
• Воспроизведите мой getAllPerms() в setTimeout.

• Код: Выделить всё

  setTimeout(() => { this.getAllPerms(); }, 0);

• Данные отображаются правильно, но тем не менее ошибки в моей консоли появляются

• Использование ngAfterContentInit() вместо ngOnInit()

Подробнее здесь: https://stackoverflow.com/questions/798 ... eckederror