显示与隐藏有很多中方法,但是在ng中有自己的显示与隐藏的方法 ng-if 或者[hidden]

在此主要介绍的是[hidden]

在ng中需要摒弃dom操作的方法,使用[hidden]

使用方法:

eg:

通过点击事件进行显示隐藏

HTML:
<div class="" [hidden]="!contenters" >
    <p>123</p>
    <p>123</p>
    <p>123</p>
    <button (click)="close()">关闭</button>
</div>
<button (click)="btn()">按钮</button>
 
ts:
public  contenters:boolen = false;
 btn(){
    this.contenters =true;
  }
  close(){
    this.contenters = false;
  }

主要采用的是[hidden]="";
在ts中进行设置 值为false;先进行隐藏,通过点击进行显示隐藏,达到想要的效果

ng的显示与隐藏的更多相关文章

  1. display:none显示和隐藏

    <html> <head> <title>显示和隐藏问题</title> <meta charset="utf-8"/> ...

  2. EditText获取和失去焦点,软键盘的关闭,和软键盘的显示和隐藏的监听

    软键盘显示和隐藏的监听: 注: mReplayRelativeLayout是EditText的父布局 //监听软键盘是否显示或隐藏 mReplayRelativeLayout.getViewTreeO ...

  3. Composer根据Name显示与隐藏

    //主要设置 模型的显示与隐藏 private void TransmissionByData_AxSendSelectionChange(string domName, bool isVisible ...

  4. js 与JQuery显示及隐藏方法

    虽然以后两种方式都能让文本信息隐藏和显示 第一种文本隐藏以后还是会占居位置, 第二种则不会占位置. <p id="p1">这是一段文本.</p> <i ...

  5. Js控制显示、隐藏文本框中的密码

    Js控制显示.隐藏文本框中的密码,也可称为是一款小型的JavaScript星号密码破解器,点击会显示出密码类型的文本框中的真实信息,再次点击则还原,程序 主要是获取HTML元素对象,然后强制更改元素属 ...

  6. jQuery判断当前元素显示状态并控制元素的显示与隐藏

    1.jQuery判断一个元素当前状态是显示还是隐藏 $("#id").is(':visible');   //true为显示,false为隐藏 $("#id") ...

  7. Div和Span标签显示与隐藏

    本实例中,学习jQuery的知识,显示与隐藏网页上的div或是span标签. 实际环境中,也许是根据某些条件进行,符合条件时,对某个或是某个div或是span标签时行显示与隐藏. 主要是学习jQuer ...

  8. js控制密码的显示与隐藏实例

    原理是建立2个input,一个type是text,一个type是password.在点击按钮时,这两input个的显示状态与val()的值在切换. html: <!DOCTYPE html> ...

  9. js简单显示和隐藏div,触发超链接,动态更改button值,setInterval()简单使用,jquery easyui弹出框简单使用 .

    js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...

随机推荐

  1. Kubernetes master无法加入etcd 集群解决方法

    背景:一台master磁盘爆了导致k8s服务故障,重启之后死活kubelet起不来,于是老哥就想把它给reset掉重新join,接着出现如下报错提示是说etcd集群健康检查未通过: error exe ...

  2. IPv6地址存储

    import java.util.Arrays; /** * @author: 何其有静 * @date: 2019/4/2 * @description: IPv6地址存储 * https://mp ...

  3. java8-Stream原理

    前言 java8新特性目前使用非常广泛,其中Stream更是最常用的特性,这篇文章将介绍Stream的原理,如果你现在还不怎么会用的话可以看一下菜鸟教 https://www.runoob.com/j ...

  4. (2)RapidJson的详解及使用

        本节主要介绍RapidJson是如何使用的.   (1)RapidJson是什么 RapidJson是一个跨平台的c++的json的解析器和生成器: 相比较jsoncpp库,RapidJson ...

  5. 泛型接口、JAVA API、包装类

    泛型接口就是拥有一个或多个类型参数的接口 语法: public interface 接口名<类型形参>{ 方法名(类型形参 类型形参实例); } 示例: public interface ...

  6. “真”pandas“假”sql

    这篇博客利用了 pandas 对数据像 sql 一样去处理. 读取测试数据 import pandas as pd import numpy as np url = 'https://raw.gith ...

  7. request对象的方法

    request对象封装的是请求的数据,由服务器创建,作为实参传递给Servlet的方法,一个请求对应一个request对象,request对象可以获得请求数据. 1.获取请求行信息 (1)get提交 ...

  8. 03 (OC)* UITableView优化

    一:cell注册和初始化 1:不注册cell 2:注册类 3:注册nib 4:storyboard 二:核心思想 1:UITableView的核心思想是:cell的重用机制.UITbleView只会创 ...

  9. 神奇的 SQL 之谓词 → 难理解的 EXISTS

    前言 开心一刻 我要飞的更高,飞的更高,啊! 谓词 SQL 中的谓词指的是:返回值是逻辑值的函数.我们知道函数的返回值有可能是数字.字符串或者日期等等,但谓词的返回值全部是逻辑值(TRUE/FALSE ...

  10. 如何从请求、传输、渲染3个方面提升Web前端性能

    什么是WEB前端呢?就是用户电脑的浏览器所做的一切事情.我们来看看用户访问网站,浏览器都做了哪些事情: 输入网址 –> 解析域名 -> 请求页面 -> 解析页面并发送页面中的资源请求 ...