Angular如何通过字符串拼接声明*ngIf判断值控制元素显隐

你当前写法中*ngIf接收到的表达式执行结果是非空字符串，在Angular的模板表达式判定逻辑里，非空字符串永远为真值（truthy），因此无论遍历到哪一项，带bullet类的span都会被渲染，完全达不到按条件隐藏项目符号的效果。
*ngIf本身完全支持模板内字符串拼接语法，判断不生效的核心是你没有给拼接结果增加明确的真假判定逻辑，直接把拼接生成的字符串本身当成了判断条件。

场景1：配合你写的hides()点击方法，实现点击对应列表项切换显示/隐藏前置bullet #

第一步：组件类中新增状态存储 #

在app.component.ts中维护一个存储需要隐藏bullet的项唯一标识的集合，用你需要的字符串拼接规则生成每项的唯一key：

// 存储已隐藏bullet的项的唯一标识
hiddenBullets = new Set<string>();

hides(season: string, index: number) {
  // 按你指定的规则拼接生成当前项的唯一key
  const itemKey = season.toLowerCase().split(' ').join('') + index;
  if (this.hiddenBullets.has(itemKey)) {
    this.hiddenBullets.delete(itemKey);
  } else {
    this.hiddenBullets.add(itemKey);
  }
}

第二步：修正模板中*ngIf的判断逻辑 #

模板中直接用相同的字符串拼接规则生成key，判断key不在隐藏集合中时才渲染bullet，同时给点击事件传入索引参数：

<mat-list>
    <mat-list-item *ngFor="let season of seasons; index as i">
        <!-- 拼接生成key后做存在性判断，返回明确的布尔值供*ngIf识别 -->
        <span *ngIf="!hiddenBullets.has(season.toLowerCase().split(' ').join('') + i)" class="bullet"></span>
        <p (click)="hides(season, i)" matLine>{{ season }}</p>
    </mat-list-item>
</mat-list>

场景2：固定规则隐藏指定项 #

如果不需要交互切换，只是要按固定拼接规则隐藏某几个匹配的项，直接将拼接结果和目标值做相等/不等判断即可，比如隐藏拼接后值为summer1的项：

<span *ngIf="(season.toLowerCase().split(' ').join('') + i) !== 'summer1'" class="bullet"></span>

• *ngIf需要接收能被明确判定为真/假的表达式：布尔值、null/undefined、空字符串、0这些会被判定为假，非空字符串、非0数字、对象实例这些会被判定为真
• 模板内的字符串拼接语法和JS原生规则完全一致，只要拼接后配合明确的比较判断、方法返回布尔值，就能正常生效

内容的提问来源于stack exchange，提问作者EMahan K