发布于 2018-08-11 16:13:35
你可以像下面这样使用单个函数,工作示例在Stackblitz上
在组件文件中
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
showMainContent: Boolean = true;
constructor() {}
ShowHideButton() {
this.showMainContent = this.showMainContent ? false : true;
}
}
并在模板文件中
<div *ngIf="!showMainContent">
<button (click)="ShowHideButton()">Show Sub content</button>
My Main content
</div>
<div *ngIf="showMainContent">
Sub Content
<button (click)="ShowHideButton()">Show Main Content</button>
</div>
发布于 2018-08-11 16:12:00
根据当前状态确定是显示还是隐藏。如果当前为true
,则将其设置为false
。如果当前为false
,则将其设置为true
。
ToggleButton() {
this.showSelected = !this.showSelected;
}
这是demo。
发布于 2018-08-11 16:13:09
只需用变量的相反值重新指定变量即可
ShowButton() {
this.showSelected = !this.showSelected;
}
https://stackoverflow.com/questions/51797741
复制相似问题