角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、次に両方のdivsがELEMENTTOSHOWと表示されます。それはちょうどそのように動作すべきではありません、それは特定のdivでのみ動作する必要があります。

助けてください。

編集：ここ は私のコードプレビューがplunkerである：

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

そのない私の全体のアプリのみ言及した、非常に単純化された部分。

あなたが私にangular1と関連ソリューションを与えることができ、私はちょうどangular2にそれを書き換えますので、私は、AngularJSタグを追加しました。

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