我睜大眼睛看密碼。我想在用戶單擊時洗掉。這是我的代碼，
組件.html
<i class="far fa-eye"
style="font-size: 22px; margin-left: -80px; cursor: pointer;"
id="togglePassword" (click) = "onclicktoggle()" ></i>
組件.ts
onclicktoggle(){
var x = <HTMLInputElement>document.getElementById("password");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
提前致謝，... }
uj5u.com熱心網友回復：
- 不要直接操作 DOM，讓 Angular 來做這項作業。另外，不要行內樣式，寫一個css類。
- 例如：
模板：
<i class="fa another-custom-class"
[class.fa-eye]="!isPasswordVisible"
[class.fa-eye-slash]="isPasswordVisible"
(click)="onclicktoggle()"></i>
<!-- Somewhere else... -->
<input [attr.type]="isPasswordVisible ? 'text' : 'password'">
TS：
isPasswordVisible = false;
onclicktoggle() {
isPasswordVisible = !isPasswordVisible;
}
（此外，還有一個帶有 FontAwesome 的 Angular 包：https ://www.npmjs.com/package/@fortawesome/angular-fontawesome ）
uj5u.com熱心網友回復：
不知道如何fa作業，但試試這種方式：
showPassword = false;
<i class="far fa-eye"
[class.show]="showPassword"
(click)="showPassword = !showPassword">
</i>
uj5u.com熱心網友回復：
用這個替換圖示
<i class="far fa-eye" *ngIf='!displayPassword'
style="font-size: 22px; margin-left: -80px; cursor: pointer;"
id="togglePassword" (click) = "onclicktoggle()" ></i>
<i class="fa-solid fa-eye-slash" *ngIf='displayPassword'
style="font-size: 22px; margin-left: -80px; cursor: pointer;"
id="togglePassword" (click) = "onclicktoggle()" ></i>
在你的組件中，你應該有類似的東西
onclicktoggle(){
this.displayPassword = !this.displayPassword;
var x = <HTMLInputElement>document.getElementById("password");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
uj5u.com熱心網友回復：
這是一種可能的解決方案
<span class="input-group-text" *ngIf="'password' != password.type">
<i class="far fa-eye-slash cursor-pointer" aria-label="Show password" (click)="toggleVisible($event, password)"></i>
</span>
<span class="input-group-text" *ngIf="'password' == password.type">
<i class="far fa-eye cursor-pointer" aria-label="Hide password" (click)="toggleVisible($event, password)"></i>
</span>
其中 toggleVisible 方法的第二個引數（ password ）是輸入參考（ #password ）
<input type="password" [.. other props.. ] #password>
在你的組件 ts
toggleVisible($event: any, element: any) {
element.type = 'text' == element.type ? 'password' : 'text'
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/392332.html