我是新手,对隐藏和显示内容有疑问。 我有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>
答案 0 :(得分:0)
<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
}
答案 1 :(得分:0)
您可以通过维护组件类属性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
答案 2 :(得分:0)
尝试这样:
模板:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="btn-group">
<div class="btn btn-dark"
(click)="showDiv.previous = !showDiv.previous;showDiv.current = false;showDiv.next = false">
Previous
</div>
<div class="btn btn-outline-secondary"
(click)="showDiv.current = !showDiv.current;showDiv.previous = false;showDiv.next = false">
Today
</div>
<div class="btn btn-dark" (click)="showDiv.next = !showDiv.next;showDiv.previous = false;showDiv.current = false">
Next
</div>
</div>
</div>
</div>
<div class="row">
<div *ngIf="showDiv.previous">Previous week datay.</div>
<div *ngIf="showDiv.next">Next week data.</div>
<div *ngIf="showDiv.current">Current week data</div>
</div>
</div>
TS:
showDiv = {
previous : false,
current : false,
next : false
}
答案 3 :(得分:0)
在.ts文件中
show = 'A';
在.html
中<div class="container">
<div class="row">
<div class="col-md-4">
<div class="btn-group">
<div class="btn btn-dark" [(viewDate)]="viewDate" (click)="show = 'A'">
Previous
</div>
<div class="btn btn-outline-secondary" (click)="show = 'B'">
Today
</div>
<div class="btn btn-dark" [(viewDate)]="viewDate" (click)="show = 'C'">
Next
</div>
</div>
</div>
</div>
<div class="row">
<div *ngIf = "isShow == 'A'">Previous week datay.</div>
<div *ngIf = "isShow == 'B'">Next week data.</div>
<div *ngIf = "isShow == 'C'">Current week data</div>
</div>
</div>