在 Angular 4 中显示一个 div 并隐藏另一个 div

Question

我希望在按钮点击时显示一个元素，并隐藏另一个元素。以下是我的代码： My Code 我能够显示子div，但我想在同一按钮点击上隐藏包含“show sub content”按钮的元素。请帮忙。

- vedankita kumbhar

Answer 1

您可以使用单个功能进行如下操作，这里有一个可正常工作的示例：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>

- Sivakumar Tadisetti

---

非常感谢您.. :) - vedankita kumbhar

@Javascript，你甚至不需要编写函数，只需使用以下代码：<button (click)="showMainContent=!showMainContent">点击</button>即可实现。 - Eliseo

@Eliseo 是的，那也是正确的，但如果我们想要执行一些代码行，我们应该编写一个函数。你的建议非常好而且简单。 - Sivakumar Tadisetti

@VijayBarot，就像Eliseo在这个答案的评论中所说的那样。 - Sivakumar Tadisetti

@vedankitakumbhar 是的，我已经开始看你的问题了 :-），5分钟前从这里发布的Stackblitz中分叉了你的代码：https://dev59.com/I63la4cB1Zd3GeqPSc7I - Sivakumar Tadisetti

Answer 2

根据当前状态决定是显示还是隐藏。如果当前状态为true，则将其更改为false。如果当前状态为false，则将其更改为true。

ToggleButton() {
  this.showSelected = !this.showSelected;
}

这是一个涉及IT技术的演示，以下是演示链接。

- Lazar Ljubenović

Answer 3

你也可以这样做。不需要初始化showMainContent变量。

<div *ngIf="!showMainContent">
   <button (click)="showMainContent=!showMainContent">Show Sub content</button>
   My Main content
</div>
<div *ngIf="showMainContent">
   Sub Content
   <button (click)="showMainContent=!showMainContent">Show Main Content</button>
</div>

- Sanoj_V

---

@Sanjog_V你能帮我一下吗？https://stackblitz.com/edit/angular-9cuejm 我添加了更多的子div，它们将首先被隐藏，然后单击每个按钮以打开与该子部分相关的部分，主要部分将隐藏，反之亦然。你能帮忙吗？ - vedankita kumbhar

Answer 4

只需要将变量重新赋值为其相反的值即可。

ShowButton() {
  this.showSelected = !this.showSelected;
}

- Sven

Answer 5

两个建议，

在声明变量时初始化，而不是在构造函数中赋值，

 showSelected: boolean = false;

在该函数内使用!切换其值。

 ToggleButton() {
      this.showSelected = !this.showSelected;
 }

演示

- Sajeetharan

Answer 6

不必写n次ngIf，你也可以写ngIf else：

<div *ngIf="isLoggedIn; else loggedOut">
  Welcome back, friend.
</div>

<ng-template #loggedOut>
  Please friend, login.
</ng-template>

或者使用 ngIf else then 语法：

<ng-container
  *ngIf="isLoggedIn; then loggedIn; else loggedOut">
</ng-container>

<ng-template #loggedIn>
  <div>
   Welcome back, friend.
  </div>
</ng-template>
<ng-template #loggedOut>
  <div>
    Please friend, login.
  </div>
</ng-template>

选择取决于您需要执行多少个检查。

- fedexo