javascript - 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

这不是我的整个应用程序，只是提到的非常简化的部分。

I have added AngularJS tag, because you can give me a solution related with angular1 and I will just rewrite it into 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