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

Question

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

我的代码

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

Answer 1

您可以使用单个函数执行以下操作，工作示例位于堆栈闪电战上

在组件文件中

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

这是演示。

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 n 次，你也可以写 ngIf else：

<div *ngIf="isLoggedIn; else loggedOut">
Welcome back, friend.
</div>
<ng-template #loggedOut>
Please friend, login.
</ng-template>

或 ng如果否则，则语法：

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

选择取决于您需要执行多少检查。