如何将变量传入Angular的*ngIf？字符串识别问题求助

我明白你的问题了——你想让*ngIf根据组件里的isLoggedIn变量动态控制菜单显示，但现在因为从service传过来的是字符串"isLoggedIn"，模板把它当成了字面量，导致不管登录状态如何都显示（因为非空字符串在*ngIf里会被判定为true）。下面给你几种可行的解决方法：

方法一：通过组件方法映射变量 #

这种方法最直接，适配你当前的代码结构：

1. 在header.component.ts里添加一个方法，用来根据传入的变量名返回对应的布尔值：

// 假设你的登录状态变量定义在这里
isLoggedIn = false;

// 新增方法：根据变量名获取对应状态
getCondition(conditionKey: string): boolean {
  // 加个安全判断，避免访问组件上不存在的属性
  if (conditionKey in this) {
    return this[conditionKey] as boolean;
  }
  return false; // 默认返回false，防止意外显示未授权内容
}

2. 修改模板里的*ngIf，调用这个方法来获取动态状态：

<ng-container *ngFor="let headerMenu of headerMenus">
  <li *ngIf="getCondition(headerMenu.ngif)">
    <a (click)="onClick(headerMenu.menu)" [class]="headerMenu.menu">
      <img [src]="headerMenu.src" [alt]="headerMenu.menu">
      <p>{{ headerMenu.menu | uppercase }}</p>
    </a>
  </li>
</ng-container>

3. 保持service里的定义不变（继续传字符串"isLoggedIn"）：

public headerMenus: HeaderMenu[] = [
  new HeaderMenu('service', 'assets/img/service.png', true),
  new HeaderMenu('pricing', 'assets/img/pricing.png', true),
  new HeaderMenu('source', 'assets/img/source.png', true),
  new HeaderMenu('about', 'assets/img/about.png', true),
  new HeaderMenu('user', 'assets/img/user.png', 'isLoggedIn'),
  new HeaderMenu('login', 'assets/img/login.png', '!isLoggedIn'), // 支持取反逻辑，需修改方法
];

如果需要支持取反（比如登录时隐藏login按钮），可以升级方法来解析表达式：

getCondition(conditionExpr: string): boolean {
  if (conditionExpr.startsWith('!')) {
    const key = conditionExpr.slice(1);
    return !(key in this && this[key] as boolean);
  }
  return conditionExpr in this && this[conditionExpr] as boolean;
}

方法二：使用条件映射对象 #

如果不想用方法，也可以在组件里定义一个映射对象，把变量名和对应的值关联起来：

isLoggedIn = false;

// 用getter确保每次访问都是最新的状态值
get conditionMap() {
  return {
    isLoggedIn: this.isLoggedIn,
    // 后续新增条件变量可以直接在这里扩展
  };
}

然后模板里直接通过对象属性访问动态状态：

<li *ngIf="conditionMap[headerMenu.ngif]">

为什么原来的写法不行？ #

你之前的代码里，*ngIf="headerMenu.ngif"相当于把字符串"isLoggedIn"直接作为表达式求值。在Angular的模板表达式规则中，非空字符串会被转换为true，所以不管你的isLoggedIn变量实际是true还是false，这个条件都会成立，导致菜单一直显示。

内容的提问来源于stack exchange，提问作者Daniel Ha