Question

我想在按钮单击时显示一个元素，而在同一按钮单击时隐藏另一个元素。这是我的代码

我能够显示sub div，但是我想在单击同一按钮时隐藏包含“ show sub content”按钮的元素。请帮忙。

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>

Answer 2

根据当前状态确定是显示还是隐藏。如果当前为true，则使其为false。如果当前是false，请设置为true。

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

这里是demo。

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>

Answer 4

只需用相反的值重新分配变量

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

Answer 5

两个建议

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

 showSelected: boolean = false;

该函数内部使用 !

切换值

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

DEMO

Answer 6

您也可以编写ngIf而不是写ngIf次：

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

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

或ngIf其他语法：

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

选择取决于您需要执行的检查次数。

显示一个div并隐藏角度4中的另一个div

6 个答案: