Angular - 如何在 ngFor 循环中使用 'this' 项的 bool 值隐藏和显示内容

Question

我有一个显示多个列表项的 ngFor 循环。每个列表项都包含一个标题。它还包含一个输入，其中包含我想要隐藏的标题。当我点击编辑按钮时，我希望显示所选项目的输入，而不是其他的。解决这个问题的最佳方法是什么？

以下是我目前所拥有的。但是，当启动 'editItem' 并将 'editable' 设置为 true 时，出现所有项目的输入框，而不仅仅是我点击的那个。

editable = false;

editItem(){
  this.editable = true;
}

<ul>
  <li *ngFor="let item of items | async">
    <div class="item">
      <div class="title"> {{ item.item_title }}</div>
      <input #newItemName type="text" [(ngModel)]="this.item.item_title" *ngIf="editable"/>
      <i aria-hidden="true" (click)="editItem()"></i>
     </div>
  </li>
</ul>

如有任何帮助，我们将不胜感激:)

Answer 1

你可以轻松修复它^^

typescript

editItem(item: any){
  item.editable = true;
}

html

<ul>
  <li *ngFor="let item of items | async">
    <div class="item">
      <div class="title"> {{ item.item_title }}</div>
      <input #newItemName type="text" [(ngModel)]="this.item.item_title" *ngIf="item.editable"/>
      <i aria-hidden="true" (click)="editItem(item)"></i>
     </div>
  </li>
</ul>