У меня проблемы с очень простым и обычным кодом. Я использовал его во многих других проектах, но на этот раз он не работает, и я схожу с ума, чтобы понять, почему.
Это просто * ngFor l oop для массива. Этот массив извлекается из http-запроса, который заполняет его голосами меню, которые может использовать пользователь. Если пользователь не зарегистрирован, этот массив инициализируется как [] и появляется только после действия входа в систему. Я уверен, что массив правильно обновляется, регистрируя его на консоли.
Я пробовал разные варианты, но никто не работал. У меня та же проблема с * ngIf, которая использует тот же массив (array.length), чтобы сделать меню скрытым или нет.
menu.ts
menuComponent: Array<any> = [];
open = false;
actualPlace = [];
controlKey = [];
constructor(
private router: Router,
public GFService: GeneralFunctionService,
public loginService: LoginService,
) {
}
ngOnInit() {
this.GFService.countThread('P');
this.GFService.getMenu().subscribe(
(res: any) => {
this.GFService.countThread('M');
this.actualPlace = window.location.pathname.split('/');
//only condition see if not logged
if(this.actualPlace[1] == 'path'){
this.controlKey.push('key');
}
else{
if(!this.loginService.user.ID){
if(localStorage.getItem('user')){
this.loginService.setUser(JSON.parse(localStorage.getItem('user')));
}
else{
this.router.navigateByUrl('/login');
return;
}
}
this.controlKey.push('standardUser');
if(this.loginService.user.userType == 'admin'
|| this.loginService.user.userType == 'superAdmin'){
this.controlKey.push('administration');
}
}
this.menuComponent = res.body.menu.filter(voce => {
return this.controlKey.filter(key => key == voce.Auth).length > 0
});
console.log(this.menuComponent)
}
)
}
login(username, password, component){
this.GFService.countThread('P');
this.loginService.login(username, password).subscribe(
(res: any) => {
this.GFService.countThread('M');
if(res.error){
component.setError(res.error);
}
else{
this.loginService.setUser(res.body.user);
this.router.navigateByUrl('/Homepage');
this.updateMenu();
}
}
)
}
updateMenu(){
this.GFService.countThread('P');
this.GFService.getMenu().subscribe(
(res: any) => {
this.GFService.countThread('M');
this.actualPlace = window.location.pathname.split('/');
if(this.actualPlace[1] == 'path'){
this.controlKey.push('key');
this.view = true;
}
else{
if(!this.loginService.user.ID){
if(localStorage.getItem('user')){
this.loginService.setUser(JSON.parse(localStorage.getItem('user')));
}
else{
this.router.navigateByUrl('/login');
return;
}
}
this.controlKey.push('standardUser');
if(this.loginService.user.userType == 'admin'
|| this.loginService.user.userType == 'superAdmin'){
this.controlKey.push('administration');
}
}
this.menuComponent = res.body.menu.filter(voce => {
return this.controlKey.filter(key => key == voce.Auth).length > 0
});
console.log(this.menuComponent)
}
)
}
menu. html
<div class="app-menu piston" [ngClass]="{'openMenu': open}" *ngIf="menuComponent.length > 0">
<div class="menuIconDiv piston" [ngClass]="{'bigIcon': open}">
<mat-icon class="menuIcon" (click)="enlargeMenu()">
menu
</mat-icon>
</div>
<div class="menuIconDiv piston"
[ngClass]="{'bigIcon': open, 'inPage': voice.usePath.replace('/', '') === actualPlace[1]}"
*ngFor="let voice of menuComponent"
(click)="action(voice)">
<mat-icon class="menuIcon" >
{{voice.iconText}}
</mat-icon>
<div class='label piston' [ngClass]="{'hide': !open}">{{voice.label}}</div>
</div>
</div>
Кто-нибудь может мне помочь? Я не могу понять, в чем проблема, потому что в других приложениях у меня не было таких проблем.