如何在Angular中仅当条件为真时显示指定span元素？

你遇到的核心问题其实是对象引用比较导致的判断失效——虽然控制台打印的两个对象内容看起来完全一样，但在Angular里，==或===比较对象时，判断的是它们是否指向内存中的同一个引用，而非内容是否相同。这就是为什么你循环里看着相等，但模板里的*ngIf/[hidden]没起作用的原因。

给你两个实用的解决方案：

方案一：存储稀有漫画的唯一标识（推荐） #

最稳妥的方式是不存整个稀有漫画对象，而是存它的唯一ID（API返回的漫画数据一般都会有id这类唯一标识字段），用基本类型比较就不会有引用匹配的问题。

1. 修改组件逻辑 #

先在组件类里声明变量来存稀有漫画的ID：

rareComicId: number; // 如果你的ID是字符串类型就改成string

然后更新listComics方法：

listComics() { 
  this.comicsService.getComics().subscribe( 
    comicsList => { 
      this.comics = comicsList.data.results; 
      // 只存储稀有漫画的ID，而非整个对象
      const randomIndex = Math.floor(Math.random() * this.comics.length);
      this.rareComicId = this.comics[randomIndex].id;
      
      // 可选：验证选中的稀有漫画
      console.log('选中的稀有漫画:', this.comics[randomIndex]);
    }); 
}

2. 模板中用ID做判断 #

在循环渲染漫画的区域，用当前漫画的ID和rareComicId做比较：

<div *ngFor="let comic of comics">
  <!-- 这里放置漫画的标题、封面等内容 -->
  <span class="badge badge-danger" *ngIf="comic.id === rareComicId">RARE</span>
</div>

方案二：自定义对象比较方法 #

如果你一定要基于整个对象做判断，可以写一个辅助方法来校验内容一致性（比如通过唯一属性匹配）：

1. 给组件类添加辅助方法 #

isRareComic(comic: any): boolean {
  // 用能唯一标识漫画的属性做比较，比如id
  return this.rareComic && comic.id === this.rareComic.id;
}

2. 模板中调用方法判断 #

<div *ngFor="let comic of comics">
  <span class="badge badge-danger" *ngIf="isRareComic(comic)">RARE</span>
</div>

注意：方案二每次变更检测都会调用方法，性能上略逊于方案一，所以优先推荐使用方案一哦。

内容的提问来源于stack exchange，提问作者Caio Henrique