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

【问题标题】：Angular - How to hide and show content with a boolean for 'this' item in a ngFor loopAngular - 如何在 ngFor 循环中使用“this”项目的布尔值隐藏和显示内容
【发布时间】：2018-06-04 11:47:19
【问题描述】：

我有一个显示几个列表项的 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>

任何帮助将不胜感激:)

【问题讨论】：

这是将列表项抽象为单独组件的好地方。如果你这样做了，那么你的代码就可以工作了。
最好的方法是检索您的 TS 中的项目列表。将editable 字段添加到客户端的每个项目items.forEach(item => item['editable'] = false) 然后*ngIf="item.editable"
很简单，但提供一个 UI 示例！输入/秒和编辑按钮/秒。这些是如何工作的？编辑按钮只出现在选定的元素上？元素是如何选择的？

标签： angular typescript angular-ng-if

【解决方案1】：

你可以轻松修复它^^

打字稿

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>

【讨论】：

多么优雅的解决方案。谢谢你。我会尽快将其作为答案。作为快速跟进：此解决方案显示所选项目的输入，如果我随后选择另一个项目，是否可以隐藏所有其他项目（已打开？）

【解决方案2】：

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

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

然后convert函数设置all为false，编辑

点击事件：editItem，为其提供索引（因此在您的ngFor 循环中添加let i = index）项目，并设置使用快速假填充数组，然后选择索引为真。
悬停退出事件：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>

【讨论】：