總是進入我的角度15遷移....

今天，我的問題是當我們第一次在現場輸入東西時，輸入密碼會顯示兩只眼睛。

HTML文件中的代碼如下:

<mat-form-field appearance="fill">
  <mat-label>Password</mat-label>
  <input matInput [type]="showPassword ? 'text' : 'password'" name="password">
  <mat-icon matSuffix (click)="togglePasswordVisibility()">
    {{showPassword?'visibility_off':'visibility'}}
  </mat-icon>
</mat-form-field>

以及相應的Typescript組件中的類似內容:

...
  public showPassword: boolean = false;
  public togglePasswordVisibility(): void {
    this.showPassword = !this.showPassword;
  }
...

結果是:

有什么想法嗎？

您需要包裝& ltmat-icon & gt；帶有& ltbutton & gt。請參見官方文檔。

嘗試以下方法:

超文本標記語言

<mat-form-field appearance="fill">
  <mat-label>Enter your password</mat-label>
  <input matInput [type]="hide ? 'password' : 'text'">
  <button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
    <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
  </button>
</mat-form-field>

分時（同timesharing）

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

/** @title Form field with prefix & suffix */
@Component({
  selector: 'form-field-prefix-suffix-example',
  templateUrl: 'form-field-prefix-suffix-example.html',
  styleUrls: ['form-field-prefix-suffix-example.css'],
})
export class FormFieldPrefixSuffixExample {
  hide = true;
}