Как показать / скрыть содержимое Div по клику Angular 2+

Question

У меня есть div, и на основании идентификатора клика я хочу, чтобы этот 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; }

Текущая ситуация. все гиганты открыты для меня на клике. Я хочу открыть по нажатию идентификатора. пример:

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

Текущая ситуация: нажмите div 3, все div будут открыты. Я хочу кликнуть на div 3, открыть только его div.

Answer 1

Вам нужно создать массив значений для отслеживания каждого деления, которое вы хотите переключить, и использовать этот массив при переключении

<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]; }