Angular中*ngFor循环内点击按钮用*ngIf仅显示当前项输入框的问题

你当前定义的isEditEnable是组件全局作用域的单一布尔值，*ngFor循环渲染的所有电影条目都共用这一个状态，点击任意按钮修改这个值时，所有条目的*ngIf判断都会同步生效，才会出现全部输入框同时显示/隐藏的问题。不需要引入额外的复杂事件机制，直接调整状态绑定逻辑即可实现需求，下面是两种常用实现方案：

如果需要支持同时打开多个电影条目的编辑输入框，直接把编辑状态挂载到每个循环的movie对象上即可。

TypeScript 代码调整 #

movieList: any[] = [];

// 列表初始化时（比如接口请求返回数据后），给每个电影项增加专属的编辑状态标记
initList() {
  // 替换成你实际获取电影列表的逻辑
  const rawMovieData = [/* 接口返回的原始电影数据 */];
  this.movieList = rawMovieData.map(item => ({
    ...item,
    isEditEnable: false // 每个项独立维护自己的编辑开关
  }))
}

// 点击时只修改当前传入项的状态
onEdit(currentMovie: any) {
  currentMovie.isEditEnable = !currentMovie.isEditEnable;
}

HTML 模板调整 #

<div *ngFor="let movie of movieList" class="movieRow">
  <!-- 点击时把当前循环的movie实例传入方法 -->
  <button (click)="onEdit(movie)">click</button>
  <!-- 直接判断当前项自身的编辑状态 -->
  <div *ngIf="movie.isEditEnable">
    <input />
  </div>
</div>

如果业务要求同一时间只能有一个条目处于编辑状态，不需要修改原始movie数据结构，单独存储当前编辑项的唯一标识（比如电影id）即可。

TypeScript 代码调整 #

// 存储当前处于编辑状态的电影id，默认值为null表示无编辑项
editingMovieId: string | number | null = null;

onEdit(movieId: string | number) {
  // 点击的是当前已编辑的项则关闭，否则切换为当前点击项的id
  this.editingMovieId = this.editingMovieId === movieId ? null : movieId;
}

HTML 模板调整 #

<!-- 把movie.id替换成你数据中实际的唯一主键字段即可 -->
<div *ngFor="let movie of movieList" class="movieRow">
  <button (click)="onEdit(movie.id)">click</button>
  <!-- 判断当前项id是否等于正在编辑的id -->
  <div *ngIf="editingMovieId === movie.id">
    <input />
  </div>
</div>

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