Angular中*ngFor循环内按钮按需单次显示问题求助

你的问题出在两处：一是按钮直接使用了*ngFor循环内部的item变量，循环外部无法访问该变量；二是当前逻辑会给每个符合条件的元素生成按钮，不符合“仅显示一次”的需求。

步骤1：在组件类中添加判断逻辑 #

在组件的.ts文件里，新增一个计算属性来统一判断按钮的显示条件：

// 组件类中的代码
get shouldShowUpdateButton(): boolean {
  // 同时满足两个条件：数组有数据，且至少有一个item的name包含"RI"
  return this.items.length > 0 && this.items.some(item => item.name.includes('RI'));
}

步骤2：修改模板代码 #

将按钮移到*ngFor循环外部，用上面的计算属性控制显示：

<div>
  <span *ngFor="let item of items">
    {{ item.name }}
  </span>
  <button *ngIf="shouldShowUpdateButton">
    <div class="icon-override size-20 pointer"></div>
  </button>
</div>

说明 #

• items.some(...)会遍历数组，只要找到一个包含"RI"的项就返回true，确保只要有符合条件的数据就显示按钮
• 按钮放在循环外，只会生成一次，满足“仅显示一次”的要求
• 移除了没用的let index = last，简化代码

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