Angular 8隐藏div并在按钮点击时显示div_编程开发

Angular 8隐藏div并在按钮点击时显示div

创始人

2024-10-17 23:02:04

0次

在Angular 8中，您可以使用*ngIf指令来根据条件来隐藏或显示div元素。下面是一个示例代码，它演示了如何隐藏div并在按钮点击时显示div：

app.component.html：


  这是要隐藏和显示的div内容。

app.component.ts：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  showDiv: boolean = false;

  toggleDiv() {
    this.showDiv = !this.showDiv;
  }
}

在上面的代码中，我们使用了*ngIf指令来根据showDiv变量的值来隐藏或显示div元素。初始情况下，showDiv的值为false，所以div元素会被隐藏。当按钮被点击时，toggleDiv()方法会被调用，该方法会将showDiv的值取反，从而隐藏或显示div元素。

请注意，上述代码假设您已经创建了一个名为"app"的Angular应用，并且AppComponent已经被添加到了app.module.ts中的declarations数组中。如果您的项目结构或命名不同，请相应地修改代码。

上一篇：Angular 8依赖下拉框的输入框

下一篇：Angular 8应用程序编译显示：“错误 TS1005：期望'：'”

Angular 8隐藏div并在按钮点击时显示div

相关内容

热门资讯