javascript - 密码未显示

Question

我正在使用 Angular，而且我是新手。我需要单击按钮在文本和密码之间切换。我关注了this发布但我仍然看不到密码。有人可以帮忙吗。以下是我的 html 代码

  <input type="tel" #x [(ngModel)]="loginuser.password" formControlName="password" name="password" id="password" placeholder="Enter your password" class="conceal-circle">
  <label for="password">Enter your password</label>
</div>
<span class="btn-eye">
  <a href="javascript:void(0);"  (click)="x.type=x.type=='password'?'text':'password'" class="text-dark text-decoration-none">
    <i class="fa fa-eye float-right"></i>
  </a>
</span>

以下是我的 typescript 代码

  export class LoginComponent implements OnInit {
      formGroup: FormGroup;

      currentUser: User;
    
      constructor(private router: Router, private formbuilder: FormBuilder,
        private authService: AuthService, private token: TokenStorage, private loginService: LoginserviceService) { }
    
      loginuser: LoginUser = new LoginUser();//contains user name and pwd
    
      ngOnInit() {
    

    
        this.currentUser = JSON.parse(window.sessionStorage.getItem('currentUser'));
        if (typeof this.currentUser !== 'undefined') {
          window.sessionStorage.removeItem('currentUser');
        }
        if (null !== this.token.getToken()) {
          this.token.signOut();
        }
        this.formGroup = this.formbuilder.group({
          userName: new FormControl('', Validators.required),
          password: new FormControl('', Validators.required)
        });
    
      }
    login(){
//some api calls here
}
      }
    
      cancel(): void {
        this.loginuser.userId = '';
        this.loginuser.password = '';
      }
    
    }

Answer 1

试试这个

.HTML

</div>
  <input type="{{ isActive ? 'password' : 'text' }}"
[(ngModel)]="loginuser.password" formControlName="password" name="password" id="password" placeholder="Enter your password" class="conceal-circle">
  <label for="password">Enter your password</label>
</div>
<span class="btn-eye">
  <a href="javascript:void(0);"  (click)="eye()" class="text-dark text-decoration-none">
    <i class="fa fa-eye float-right"></i>
  </a>
</span>

.ts

isActive: boolean = true;

eye(){
  this.isActive = !this.isActive;
}

希望对你有帮助。