Angular 5 ngHide ngShow [隐藏] 不起作用 [英] Angular 5 ngHide ngShow [hidden] not working

问题描述

大家好！

我正在尝试让我的 Angular 5 应用隐藏元素(或显示隐藏).但是，这似乎不起作用.

我尝试过 ngHide、ng-hide、ngShow、ng-show、[hidden] 方法 - 它们都不起作用.

我的 login.component.ts 看起来像这样:

import { Component, OnInit } from '@angular/core';@成分({选择器:'登录'，templateUrl: './login.component.html',styleUrls: ['./login.component.css']})导出类 LoginComponent 实现 OnInit {isHidden: boolean = true;input_pw: 字符串 = '密码';构造函数(){}ngOnInit() {控制台日志(this.isHidden)；//控制台显示为真}}

和 login.component.html:

<div class="cont-login"><div class="登录窗格"><div><p class="inner log-labels">您的密码</p><input class="txt" type="password" [(ngModel)]="input_pw" ngHide="isHidden">
<div><input class="btn" type="submit" value="登录">

我在这里做错了吗?

注意:我没有更改或添加任何与 css 相关的内容.

解决方案

2019 更新: 我意识到这有点不好.正如第一条评论所述，这在很大程度上取决于具体情况，使用 [hidden] 属性并非不好的做法:请参阅某些需要使用它的情况的评论，以及不是 *ngIf

原答案:

你应该总是尝试使用 *ngIf 而不是 [hidden].

有几篇博客文章是关于该主题的，但最重要的是，隐藏通常意味着你不希望浏览器渲染对象 - 使用 angular 你仍然会在渲染它时浪费资源，而且它最终会出现在 DOM 中(并且棘手的用户可以使用基本浏览器看到它操纵).

Good day, guys!

I am trying to make my Angular 5 app hide elements (or show hidden). However, this seems to not work.

I've tried ngHide, ng-hide, ngShow, ng-show, [hidden] methods - none of them works.

My login.component.ts looks like this:

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

@Component({
  selector: 'login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})

export class LoginComponent implements OnInit {
  isHidden: boolean = true;
  input_pw: string = 'password';

  constructor() { }

  ngOnInit() {
    console.log(this.isHidden); //console shows true
  }

}

And login.component.html:

<div class="container">

  <div class="cont-login">
    <div class="login-pane">

      <div>
        <p class="inner log-labels">Your password</p>
        <input class="txt" type="password" [(ngModel)]="input_pw" ngHide="isHidden">
      </div>

      <div>
        <input class="btn" type="submit" value="Login">
      </div>

    </div>


  </div>

</div>

Am I doing something wrong here?

NOTE: I did not change or add anything related to css.

解决方案

2019 Update: I realize that this is somewhat bad advice. As the first comment states, this heavily depends on the situation, and it is not a bad practice to use the [hidden] attribute: see the comments for some of the cases where you need to use it and not *ngIf

Original answer:

You should always try to use *ngIf instead of [hidden].

 <input *ngIf="!isHidden" class="txt" type="password" [(ngModel)]="input_pw" >

There are several blog posts about that topics, but the bottom line is, that Hidden usually means you do not want the browser to render the object - using angular you still waste resource on rendering it, and it will end up in the DOM anyway (and tricky users can see it with basic browser manipulation).

这篇关于Angular 5 ngHide ngShow [隐藏] 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！