Angular

Question

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

以下是我目前所拥有的。但是，当启动'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

您可以.. 创建一个 editMode 布尔值和 editStates 布尔值数组（每个项目一个）在 component.ts

editMode = false;
editable = new Array<boolean>(this.items.length);

然后转换函数以将所有设置为 false，并编辑

点击事件：editItem，为它提供索引（所以在你的ngFor循环中添加let i = index）项目，并设置使用快速错误填充数组后跟索引选择为真。
hoverout 退出事件：exitEditMode。

  editItem(index: number) {
    this.editMode = true;
    this.editable.fill(false);
    this.editable[index] = true;
  }

  exitEditMode() {
    this.editMode = false;
  }

然后在 html 中，您可以使用 ngIf 隐藏所有在编辑模式下禁用的可编辑项，方法是探测 editMode 和可编辑项。像这样：

<ul>
  <li *ngFor="let item of items | async; let i = index">
    <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" *ngIf="editMode && editable[i]" (click)="editItem(i)" (mouseout)="exitEditMode()"></i>
    </div>
  </li>
</ul>

Answer 2

你可以轻松修复它^^

打字稿

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>

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

Angular - How to hide and show content with a boolean for 'this' item in a ngFor loop

typescript

angular-ng-if