如何通过点击id来显示/隐藏div内容？Angular 2+

Question

我有一个div，根据click id，我希望打开这个div。现在，所有点击的div都在打开。我只想通过单击id来防止这种情况发生。

 <div class="owner-card" *ngFor="let ownership of ownerShips">
        <div class="first-column pd-8" (click)="toggle()">
        SHOW/HIDE
        </div>

          <app-slide-panel [activePane]="isViewable ? 'right' : 'left'">
              <div class="second-column pd-8 m-h-127" leftPane>
                   LEFT {{ ownership .id }}
              </div>
              <div class="second-column pd-8 m-h-127" rightPane>
                   RIGHT {{ ownership .id }} {{ ownership .name}}
              </div> 
            </app-slide-panel>
    </div>

    this.isViewable = true;
    public toggle(e : any): void { this.isViewable = !this.isViewable; }

目前的情况。所有的巨人都会在点击的时候向我开放。我想通过点击id打开。示例：

<div> 1 </div>
<div> 2 </div>
<div> 3 </div>
<div> 4 </div>

当前情况点击div 3，所有div都将打开。我想点击div 3，只打开它的div。

Answer 1

您需要创建一个值数组来跟踪您想要切换的每个div，并在切换时使用该数组

<div class="owner-card" *ngFor="let ownership of ownerShips; let i = index">
    <div class="first-column pd-8" (click)="toggle(i)">
    SHOW/HIDE
    </div>

      <app-slide-panel [activePane]="isViewable[i] ? 'right' : 'left'">
          <div class="second-column pd-8 m-h-127" leftPane>
               LEFT {{ ownership .id }}
          </div>
          <div class="second-column pd-8 m-h-127" rightPane>
               RIGHT {{ ownership .id }} {{ ownership .name}}
          </div> 
        </app-slide-panel>
</div>

isViewable: boolean[] = [];
for (const element of this.ownerShips) {
 this.isViewable.push(false);
}
public toggle(i): void { this.isViewable[i] = !this.isViewable[i]; }