Angular 2.更改類只有聚焦元素

Question

我有幾個按鈕和div元素。 div被隱藏。我想揭示具體的div，當點擊特定的按鈕時。

例如：您單擊第一個按鈕 - 只有第一個div出現（通過更改他的類出現）。

代碼：app.component.html

<button class="BUTTON" (click)="isHidden = !isHidden"> 
</button> 
<div class="ELEMENTTOSHOW" [ngClass]="{ 'subMenuShow':isHidden }">first 
</div> 

<button class="BUTTON" (click)="isHidden = !isHidden"> 
</button> 
<div class="ELEMENTTOSHOW" [ngClass]="{ 'subMenuShow':isHidden }">second 
</div> 

app.component.ts

export class AppComponent { 
    isHidden = false; 
} 

該解決方案是錯誤的，因爲當我點擊例如首先BUTTON然後出現兩個div ELEMENTTOSHOW。它不應該這樣工作，它只應該在特定的div上工作。

任何幫助表示讚賞。

編輯： 這裏是我的代碼預覽上plunker：

https://plnkr.co/edit/BQKanrtuoADClGLVSdBC?p=preview

它不是我的整個應用程序，只有提到的，非常簡單的一部分。

我已經添加了AngularJS標記，因爲您可以給我一個與angular1相關的解決方案，我會將其重寫爲angular2。

Answer 1

我重組它是這樣的：

HTML

<button class="BUTTON" (click)="isHiddenfirst = !isHiddenfirst"> 
</button> 
<div *ngIf="isHiddenfirst" class="ELEMENTTOSHOW subMenuShow"> 
    first 
</div> 

<button class="BUTTON" (click)="isHiddensecond = !isHiddensecond"> 
</button> 
<div *ngIf="isHiddensecond" class="ELEMENTTOSHOW subMenuShow"> 
    second 
</div> 

TS

import {Component} from 'angular2/core'; 

@Component({ 
    // Declare the tag name in index.html to where the component attaches 
    selector: 'hello-world', 

    // Location of the template for this component 
    templateUrl: 'src/hello_world.html', 
    styleUrls: ['src/hello_world.css'] 
}) 
export class HelloWorld { 

isHiddenfirst = false; 
ishiddensecond = false; 
} 

https://plnkr.co/edit/BOLCoRY0SmLe8GZT3PUG?p=preview