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>

- sarasm

---

所以你想要三个按钮，每次点击一个按钮就显示一个单独的 div？比如：button1 显示 div1，button2 显示 div2，button3 显示 div3？（其他两个 div 是隐藏的：点击按钮 A -> 显示 divA 并隐藏 divB 和 divC，点击按钮 C -> 显示 divC 并隐藏 divA 和 divB），是这样吗？ - Jacopo Sciampi

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>

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
    }

- MaBbKhawaja

Answer 2

尝试像这样：

模板： 演示

<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
}

- Adrita Sharma

Answer 3

你可以通过维护一个组件类属性currDiv并将其初始化为A来轻松实现此操作。

在你的组件模板中，你可以有一个按钮来显示一个

元素。

<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

- Saksham

Answer 4

在 .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>

- user4991547

Answer 5

**IN HTML FILE :**

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

**IN TS FILE :**

 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
    }

- Kaji Rafiqul Islam