angular2 * ngFor и * ngЕсли не обновлять - PullRequest
0 голосов
/ 12 февраля 2020

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

Это просто * 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>

Кто-нибудь может мне помочь? Я не могу понять, в чем проблема, потому что в других приложениях у меня не было таких проблем.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...