Javascript 在ngFor循环中编辑项目时如何停止打开所有项目

我有一个对象数组，您可以编辑每个对象的名称，但我单击以编辑一个打开的项目的所有名称，我想知道如何修复此问题

{{stop.Name}
停止
服务
{{stop.StopNo}
{{stop.Type | titlecase}}

您的数组中有一个唯一的id值，然后您可以这样做：

<div *ngFor="let row of myDataList">
  <div [attr.id]="row.myId">{{ row.myValue }}</div>
</div>

{{row.myValue}}

---

为您的输入字段分配一个id，它们将正常工作。现在，它们都有相同的id。

在组件中声明一个数组

hideme=[];

在html中

   <div *ngFor="let stop of fave; let i = index" attr.data="{{stop.Type}}">
       <a (click)="hideme[i] = !hideme[i]">show/hide</a>
       <div [hidden]="hideme[i]">The content will show/hide</div>
    </div>

显示/隐藏
内容将显示/隐藏

以下面的代码为例：

在组件中，创建如下映射：

itemStates: { [uniqueId: string]: boolean } = {};

在点击功能中：

itemClicked(uniqueId: string) {
    let opened: boolean = this.itemStates[uniqueId];
    if (opened !== undefined) {
        opened = !opened; // Invert the result
    } else {
        opened = true;
    }
}

在HTML中：

<div *ngFor="let item of items">
    <h1 (click)="itemClicked(item.uniqueId)">{{ item.name }}</h1>
    <div *ngIf="itemStates[item.uniqueId] == true">
        <p>This item is open!</p>
    </div>
</div>

{{item.name}
这个项目是开放的

基本上，数组中的每个项都应该有一个唯一的标识符。

itemStates

对象充当字典，每个唯一ID都有一个关联的真/假值，指示该项是否打开

---

编辑：这个问题的公认答案非常简单，效果也很好，但这个例子可能适合那些需要同时打开多个项目的人。

如果您想一次打开一个项目，可以使用项目的索引和布尔值。单击时，如果尚未分配索引值，则将其设置为

toggl

，否则将其分配为

null

（以便我们可以在单击时关闭打开的div），然后在

toggl==i

时显示所需的内容。比如：

<div *ngFor="let stop of fave; let i = index">
  <label (click)="toggl === i ? toggl = null : toggl = i">Stuff!</label>
  <div *ngIf="toggl === i">
    <!-- ... -->
  </div>
</div>

东西

---

演示：

每个项目都需要一个唯一的标识符。现在您只使用了一个变量。我可以使用索引作为唯一id吗？@conordonhoe是的，您可以，这将为您提供更多帮助@conordonhoe，您是否希望一次只打开一个变量，因此如果一个变量打开，您单击另一个变量，则打开的那个变量应该关闭？或者您想打开任意多个？@AJT_82我想一次打开一个我有唯一的ID我可以更新数据没有问题，但当我单击字段更新一个结果时，数组中的所有其他字段都会打开aswell@ConorDonohoe你能把它放在小提琴上或别的什么东西上吗