值更改时角度组件不更新

Posted 2023-02-22

【中文标题】值更改时角度组件不更新

【英文标题】：Angular component not updating when value changed

【发布时间】：2022-01-21 15:58:39

【问题描述】：

当我的一个变量发生变化时，我很难让 ngIf 更新。

我有一个具有用户身份验证的离子（角度）应用程序。当应用程序加载时，它应该隐藏导航菜单并在用户退出时仅显示登录视图。当用户登录时，应用程序应在从服务器检索用户数据时显示加载屏幕，然后显示适当的视图并显示导航菜单。我无法显示导航菜单。我认为这与在视图完成渲染后运行更改 isLoggedIn 的代码有关，但我不确定，因为任何强制重新渲染的尝试都没有产生任何变化

export class AppComponent 

    public user: User
    public isLoggedIn = false;
    
  public appPages = [
     title: 'Home', url: '/assignment', icon: 'home', role: 'Employee',
     title: 'Home', url: '/supervisor', icon: 'home', role: 'Supervisor',
     title: 'Assignments', url: '/assign', icon: 'body', role: 'Supervisor',
     title: 'Manager', url: '/manager', icon: 'briefcase', role: 'Supervisor',
     title: 'Settings', url: '/settings', icon: 'settings', role: 'any'
  ];
  constructor(private router: Router, private auth: Auth, private userService: UserService) 
    this.router.navigate(["/loader"]);
    this.authorise();
  
  
  authorise()
      if(localStorage.getItem("uid"))
        console.log("user Is Logged In: Getting data");
        this.userService.getUser(localStorage.getItem("uid")).subscribe(res => 
            console.log("assigning user")
            console.log(res);
            this.user = res
            this.checkRole();   
        );
    else
        this.router.navigate(["/login"])
    

  
  
  checkRole()
  console.log("checking....");
    if(this.user.role == "Employee")
         this.isLoggedIn = true;
        this.router.navigate(["/assignment"]);
    else
        this.isLoggedIn = true;
        this.router.navigate(["/supervisor"]);  
    
  

```

我的模板文件（只是相关部分）

<ion-app>
  <ion-split-pane contentId="main-content">
    <ion-menu contentId="main-content" type="overlay" *ngIf="isLoggedIn">
      <ion-content>
        <ion-list id="menu-list">
        ..........

如您所见，当应用加载时，isLoggedIn 为 false，从而强制不呈现 ion-menu。

然后，脚本构造函数调用授权并从 Firestore 数据库异步检索用户的文件。一旦检索到该数据，它就会调用checkRole 并在router-outlet 中加载适当的页面（不包括在此示例中）。一旦建立了用户角色checkRole 将isLoggedin 设置为true，这是我希望模板开始显示菜单栏的位置。

有谁知道如何做到这一点？

谢谢:)

【问题讨论】：

使用 MenuController 在您的应用中禁用侧边菜单。检查文档：ionicframework.com/docs/v4/api/menu-controller

【参考方案1】：

做一些类似的事情：

import  MenuController  from '@ionic/angular'; // import menu controller


constructor(private menu: MenuController)  
  this.menu.enable(false); // make your menu hidden by default.


// inside your checkRole Function enable your menu.
checkRole()
    if(this.user.role == "Employee")
      //this.isLoggedIn = true;
      this.menu.enable(true);
      this.router.navigate(["/assignment"]);
    else
      //this.isLoggedIn = true;
      this.menu.enable(true);
      this.router.navigate(["/supervisor"]);  
    
 

【讨论】：

嗨，我已经实现了this.menu.enable(false) 代码行（并在构造函数中导入并包含了服务）但是菜单并没有消失。我还尝试添加menuId，但仍然没有。知道如何调试吗？

我还没有在 checkRole() 中添加这些行，所以我绝对看不到代码可以重新启用菜单

那么你应该在你的页面中添加菜单锥。就像在您的登录/sginup 页面中禁用，登录后在主页启用。