angular - Angular 8隐藏div并在按钮单击时显示div

Question

我是 Angular 新手，在隐藏和显示内容方面存在问题。我有 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>

标签： angularshow-hide

Answer 1

<div *ngIf="div1">
    ABC
</div>
<div>
    DEF
</div>
<div>
    GHI
</div>
<button (click)="div1Function()"></button>
<button (click)="div2Function()"></button>
<button (click)="div3Function()"></button>

文件

    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
    }