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

时间:2018-08-11 08:01:51

标签: angular typescript button

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

My Code

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

6 个答案:

答案 0 :(得分:4)

您可以使用以下单个功能执行以下操作,工作示例在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>

答案 1 :(得分:3)

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

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

这里是demo

答案 2 :(得分: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>

答案 3 :(得分:1)

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

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

答案 4 :(得分:0)

两个建议

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

 showSelected: boolean = false;

该函数内部使用 !

切换值
 ToggleButton() {
      this.showSelected = !this.showSelected;
 }

DEMO

答案 5 :(得分:0)

您也可以编写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>

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