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

您可以用一个函数来完成下面的操作,下面是 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>

根据当前状态确定是显示还是隐藏。如果是现在 true false . 如果是现在 假 真的

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

这是 demo

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

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

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

两个建议,

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

 showSelected: boolean = false;

!

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

DEMO

您也可以编写ngIf else,而不是n次编写ngIf:

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

选择取决于你需要做多少检查。