[解決済み] Angular 5 ngHide ngShow [hidden] が動作しない。

質問

ごきげんよう、みなさん

私はAngular 5アプリで要素を隠す（または非表示を表示する）ようにしようとしています。しかし、これはうまくいかないようです。

ngHide, ng-hide, ngShow, ng-show, [hidden] メソッドを試しましたが、どれもうまくいきません。

私のlogin.component.tsはこのような感じです。

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
  }

}

そして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>

私は何か間違っているのでしょうか？

注：css関連は何も変更・追加していません。

解決するには？

2019年最新情報 これはいささか悪いアドバイスであることを自覚しています。最初のコメントにあるように、これは状況に大きく依存するものであり ではなく hidden]属性を使用するのは悪い習慣です。 *ngIf

オリジナルの回答です。

を常に使用するようにします。 *ngIf の代わりに [hidden] .

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

いくつかの に関するブログ記事 しかし、要するに、Hiddenは通常、ブラウザにオブジェクトをレンダリングさせたくないことを意味します。angularを使用してもレンダリングにリソースを浪費し、どのみちDOMに残ってしまいます（そしてトリッキーなユーザーはブラウザの基本操作でそれを見ることができます）。