显示与隐藏有很多中方法,但是在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. poj 2649 Factovisors 对n!进行因数分解

    Factovisors Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 4431   Accepted: 1086 Descr ...

  2. codeforces 459 D. Pashmak and Parmida's problem(思维+线段树)

    题目链接:http://codeforces.com/contest/459/problem/D 题意:给出数组a,定义f(l,r,x)为a[]的下标l到r之间,等于x的元素数.i和j符合f(1,i, ...

  3. 【Windows】PostgreSql安装

    Installer安装包问题 Problem running post-install step. Installation may not complete correctly. The datab ...

  4. VScode神器如何同步配置和所装插件

    由于近期编辑器换用vscode,回到家里也需要写代码,但是家里电脑也需要安装vscode,并设置相同配置和插件.想到以前webstrom可以直接导出配置然后安装. 但是vscode无此配置,突发奇想g ...

  5. CentOS配置服务开机自启

    本例子以nginx作为举例: CentOS7中 以systemctl 替代了chkconfig 进行服务的管理, 默认在CentOS6 中控制服务开机自启,是在vim /etc/rc.d/rc.loc ...

  6. Java web的基本概念

    概念一直是学习计算机软件开发中经常遇到的问题,也是软件行业最喜欢创造的东西.很多时候,学习计算机软件开发遇到困难都是因为对某些概念的不理解,而不是因为技术本身有多么复杂.Java Web作为Java ...

  7. springcloud(五):Spring Cloud 配置中心的基本用法

    Spring Cloud 配置中心的基本用法 1. 概述 本文介绍了Spring Cloud的配置中心,介绍配置中心的如何配置服务端及配置参数,也介绍客户端如何和配置中心交互和配置参数说明. 配置中心 ...

  8. Mysql高手系列 - 第9篇:详解分组查询,mysql分组有大坑!

    这是Mysql系列第9篇. 环境:mysql5.7.25,cmd命令中进行演示. 本篇内容 分组查询语法 聚合函数 单字段分组 多字段分组 分组前筛选数据 分组后筛选数据 where和having的区 ...

  9. String字符串关于==的详解

    String详解 字符创建方式 字符串创建有两种方式 String s = new String("myString"); String string2 = "myStr ...

  10. android 多行 RadioButton的使用

    最近项目用到了多行RadioButton,随记录下. 先给出RadioButton的布局 <com.kuibu.jucai.widget.MyRadioGroup android:id=&quo ...