Angular如何实现点击Edit按钮切换显示隐藏span内输入框

核心逻辑是给Edit按钮的点击事件增加切换判断：如果当前点击的条目已经是处于编辑状态的条目，就清空编辑索引隐藏输入框，否则设置编辑索引为当前条目索引显示输入框，修改后的代码如下：

1. 修改TypeScript代码 #

新增切换编辑状态的方法，冗余的showInput变量可直接删除：

items: string[] = [];
editIndex: number | undefined;

// 切换编辑状态方法
toggleEdit(index: number) {
  this.editIndex = this.editIndex === index ? undefined : index;
}

// 原有测试方法保留即可
showData(index: any) {
  console.log(this.items[index]);
}

2. 修改HTML模板 #

替换Edit按钮原有的点击逻辑，调用上面新增的切换方法即可：

<h2>Universities</h2>
<ul *ngFor="let item of items; let i = index">
  <li>
    {{ item }}

    <button
      type="button"
      class="btn btn-default"
      style="background-color: #ffe4b5"
      (click)="toggleEdit(i)"
    >
      Edit
    </button>
    <span>
      <input *ngIf="editIndex === i" />
    </span>
    <span>
      <button
        type="button"
        class="btn btn-default"
        style="background-color: #90ee90"
        <!-- 可选扩展：点击保存后自动隐藏输入框，有保存逻辑可先执行保存操作再清空editIndex -->
        (click)="editIndex = undefined"
      >
        Save
      </button>
    </span>
  </li>
</ul>

注意：实际使用时请删除标签内的注释说明，避免模板语法报错。

极简实现方案（无需新增TS方法） #

如果不想额外加方法，也可以直接把切换逻辑写在HTML的点击事件里，直接替换Edit按钮的click属性即可：

(click)="editIndex = editIndex === i ? undefined : i"

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