时间戳

首页 > 解决方案 > 在角度 4 中显示一个 div 并隐藏另一个 div

angular - 在角度 4 中显示一个 div 并隐藏另一个 div

问题描述

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

我的代码

我可以显示子 div，但我想在单击同一按钮时隐藏包含“显示子内容”按钮的元素。请帮忙。

标签： angulartypescriptbutton

解决方案

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

推荐阅读