javascript - 在 ngFor 循环中编辑项目时如何阻止所有项目被打开

Question

我有一组对象，您可以编辑每个对象的名称，但随后我单击以编辑所有打开的项目的名称，我想知道如何解决这个问题。

           <div *ngFor="let stop of fave; let i = index" attr.data="{{stop.Type}}">
              <div class="card m-1">
                <div class="card-body">
                  <div class="card-text">
                    <div class="row">
                      <label class="name" *ngIf="!toggleName" (click)="toggleName = true">{{stop.Name}}</label>
                      <div class="md-form" *ngIf="toggleName">
                        <input (keydown.enter)="updateStopName(i, stop.id); toggleName = false"  placeholder="Chnage Stop Name" [(ngModel)]="stopName" required mdbInput type="text"
                          id="form1" class="form-control">
                      </div>
                    </div>
                    <div class="custom">
                      <img *ngIf="stop.Type === 'Train'" class="train-icon" style="width: 40px; height:40px"
                        src="assets/img/icon_trian.png" />
                      <img *ngIf="stop.Type === 'bus'" style="width: 40px; height:40px" src="assets/img/icon_bus.png" />
                      <img *ngIf="stop.Type === 'Luas'" style="width: 40px; height:40px"
                        src="assets/img/icon_tram.png" />
                    </div>
                    <label class="col-4 custom-label">Stop</label>
                    <label class="col-5 custom-service-label">Service</label>
                    <div class="row">
                      <span class="col-5 stop"> {{stop.StopNo}}</span>
                      <span style="padding-left:31%;" class="col-6 stop"> {{stop.Type | titlecase}}</span>
                    </div>
                    <hr />
                    <div class="row">
                      <div class="panel col-7" (click)="getRealtimeInfo({stop: stop.StopNo, type: stop.Type})">
                        <img class="panel-realtime" src="assets/img/icon_view.png" />
                      </div>
                      <div class="panel col-5" (click)="deleteFav(stop.id, i)">
                        <img class="panel-remove" src="assets/img/icon_remove.png" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

我知道它与索引有关，但我不确定如何编写代码以仅打开我单击的那个

如您所见，目前所有的人都打开了，非常感谢您的帮助

Answer 1

如果你想一次打开一个，你可以使用项目的索引和一个 bool 值。单击时，如果尚未分配索引值，则将其设置为 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>

演示:StackBlitz