Javascript 如何通过单击的id显示/隐藏div内容？角度2+；

我有一个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; }

显示/隐藏
左{{owner.id}
右{{owner.id}{{owner.name}
this.isview=true；
公共切换（e:any）：void{this.isViewable=！this.isViewable；}

现状。所有的巨人都对我开放。我要按单击的id打开。 例如：

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

1
2.
3.
4.

当前情况单击div 3，所有div都将打开。

---

我想单击div 3只打开it div。

您需要创建一个值数组来跟踪要切换的每个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]; }

显示/隐藏
左{{owner.id}
右{{owner.id}{{owner.name}
可查看：布尔值[]=[]；
for（此.所有者的常量元素）{
此.isview.push（false）；
}
公共切换（i）：无效{this.isview[i]=！this.isview[i]；}