显示与隐藏有很多中方法,但是在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. CodeForces 1018B The hat

    The hat 题解: 定义d[i]为第i个数和他对面的差值. 然后我们可以发现d[i]和d[i+1]的差值只会有3种情况2, -2, 0. 并且可以知道 d[i] = - d[i+n/2] 所以如果 ...

  2. codeforces 822 D. My pretty girl Noora(dp+素数筛)

    题目链接:http://codeforces.com/contest/822/problem/D 题解:做这题首先要推倒一下f(x)假设第各个阶段分成d1,d2,d3...di组取任意一组来说,如果第 ...

  3. CF1003D Coins and Queries 贪心

    Coins and Queries time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...

  4. [NOI2001]炮兵阵地 题解

    题意 我们先来了解一下基本的位运算 于( \(\bigwedge\) ),或 (\(\bigvee\) ) 异或(\(\bigoplus\)) 在下面我们用(&)代表于,(|)代表或 一道状压 ...

  5. Python---列表的学习(二)

    列表的第二部分 (1)列表的排序 1)使用方法sort()可对列表进行永久性排序 food = ['apple','orange','pear','grape'] food.sort() print( ...

  6. 【Offer】[12] 【矩阵中的路径】

    题目描述 思路分析 Java代码 代码链接 题目描述 请设计一个函数,用来判断在一个矩阵中是否存在一条包含某字符串所有字符的路径.路径可以从矩阵中的任意一个格子开始,每一步可以在矩阵中向左,向右,向上 ...

  7. 设置普通用户输入sudo,免密进入root账户

    满足给开发用户开权限,赋予sudo权限.又不让其输入密码的方式: 方式一: 开始系统内部的wheel用户组, 在/etc/suoers 中编辑配置文件如下: %wheel ALL=(ALL) NOPA ...

  8. Maven学习归纳(一)——简单的环境配置入门

    一.Maven的基本概念 Maven是基于项目对象模型(POM),可以通过一小段描述信息来管理项目的编译,测试,构建,报告和文档的软件项目管理工具和解决依赖关系的工具. 1.1 项目的构建 项目的构建 ...

  9. 前端-HTML-web服务本质-HTTP协议-请求-标签-01(待完善)

    目录 前端 什么是前端 什么是后端 学习流程 前端三剑客的形容 web服务的本质 测试--浏览器作为客户端向服务器发起请求 浏览器输入网址回车发生了几件事 ***** HTTP协议(超文本传输协议) ...

  10. [币严区块链]ETH搭建节点区块数据同步的三种模式:full、fast、light

    ETH  全节点Archive(归档)模式数据量增长图 上述图表可通过链接查看:https://etherscan.io/chartsync/chainarchive 通过上表,可以看到截止2019年 ...