显示与隐藏有很多中方法,但是在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. Numbers That Count POJ - 1016

    "Kronecker's Knumbers" is a little company that manufactures plastic digits for use in sig ...

  2. 【2】KNN:约会对象分类器

    前言 这是一个KNN算法的应用实例,参考<机器学习实战>中的datingTestSet2.txt的数据集. 可以通过对不同约会对象的特征进行分析然后自动得出以下三种结论: 不喜欢的 有点魅 ...

  3. VSTO之WPF和Winform弹窗

    写插件弹窗是肯定要有的,有弹窗才有展示功能的页面啊! 记录一下前段时间遇到的一些弹窗方面的坑,一个个踩过来也是收获颇丰啊! WPF弹窗 最简单的弹窗方式,new一个窗体,然后调用Show方法. Win ...

  4. 误删除系列一:linux的bin目录误删除后恢复操作

    感言:一失足成千古恨,一不小心就把/usr/bin下所有的命令都删除了,当你以为自己很熟练时,当你以为自己操作对时,可能就是失手的时候,还好这次只是一个测试环境....God 恢复过程:(以下是在vs ...

  5. 6、二叉树树(java实现)

    1.创建树的节点 public class Node { public Object data; //存储数据 public Node leftChild; //左子树指针 public Node r ...

  6. Mysql高手系列 - 第11篇:深入了解连接查询及原理

    这是Mysql系列第11篇. 环境:mysql5.7.25,cmd命令中进行演示. 当我们查询的数据来源于多张表的时候,我们需要用到连接查询,连接查询使用率非常高,希望大家都务必掌握. 本文内容 笛卡 ...

  7. tomcat 中无法添加项目等问题的解决方案

    博客地址:http://www.moonxy.com 一.前言 今天新建了一个 maven 项目,添加程序文件之后,发现无法添加项目,然后修改配置,将应用添加到了 tomcat,启动时又报错,解决出现 ...

  8. Linux 笔记 - 第十章 Shell 基础知识

    博客地址:http://www.moonxy.com 一.前言 Shell 是系统的用户界面,提供了用户与内核进行交互操作的一种接口,它接收用户输入的命令并把它送入内核去执行.实际上 Shell 是一 ...

  9. mysql 5.5之参数详解

    [mysql]default-character-set=utf8 [mysqld] datadir=/var/lib/mysqlsocket=/var/lib/mysql/mysql.sock # ...

  10. 【linux】【jenkins】自动化运维四 整合gitlab、docker发布java项目

    jenkins发布java项目 过程参考发布vue项目.https://www.cnblogs.com/jxd283465/p/11543431.html 大同小异. vue建立的是Freestyle ...