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

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>