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

Angular 2.仅改变聚焦元素的类别

1 个答案: