我是新手,对隐藏和显示内容有疑问。我有3个按钮,分别是按钮A,按钮B和按钮c。当我单击按钮A时,按钮A(即div A)的内容应可见,按钮B(即div B)和按钮C(即div C)的内容应这样隐藏。
但是当我单击相应的按钮时,我可以显示相应的div,但是我无法隐藏其他两个div。
任何人都可以帮助我。
提前感谢。
请在下面找到我正在尝试的代码。
previousWeekData(){
console.log("Previous Button Clicked");
this.isShow = !this.isShow;
}
nextWeekData(){
console.log("Next Button Clicked");
this.isShow = !this.isShow;
}
todaysWeekData(){
console.log("Todays Button Clicked");
this.isShow = !this.isShow;
}
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="btn-group">
<div class="btn btn-dark" [(viewDate)]="viewDate" (click)="previousWeekData()">
Previous
</div>
<div class="btn btn-outline-secondary" (click)="todaysWeekData()">
Today
</div>
<div class="btn btn-dark" [(viewDate)]="viewDate" (click)="nextWeekData()">
Next
</div>
</div>
</div>
</div>
<div class="row">
<div *ngIf = "isShow">Previous week datay.</div>
<div *ngIf = "!isShow">Next week data.</div>
<div *ngIf = "isShow">Current week data</div>
</div>
</div>
<div *ngIf="div1">
ABC
</div>
<div>
DEF
</div>
<div>
GHI
</div>
<button (click)="div1Function()"></button>
<button (click)="div2Function()"></button>
<button (click)="div3Function()"></button>
TS文件
div1:boolean=true;
div2:boolean=true;
div3:boolean=true;
div1Function(){
this.div1=true;
this.div2=false;
this.div3=false
}
div2Function(){
this.div2=true;
this.div1=false;
this.div3=false
}
div3Function(){
this.div3=true;
this.div2=false;
this.div1=false
}
您可以通过维护组件类属性currDiv
并将其初始化为A
来轻松完成此操作。
在您的模板中,您可以使用一个按钮将div显示为
<button type="button" (click)="ShowDiv('A')">Show A</button>
并且在模板类中,您可以将`currDiv设置为>>
ShowDiv(divVal: string) { this.currDiv = divVal; }
并且您可以将div的可见性控制为
<div *ngIf="currDiv == 'A'"> Div A </div>
StackBlitz位于:https://stackblitz.com/edit/angular-showdivonclicktoggle