![](/img/trans.png)
[英]How to convert input field type=“password” to type=“text” in angular?
[英]Show text field (not input field) as type password in Angular
我将 Angular 8 用于我的 Angular-Electron 应用程序。 我有一个字段作为 API-Key 以表格格式存储,它非常敏感,需要在用户的帐户页面上显示给用户。 问题是它需要显示为密码文本字段。 每当用户单击名为“显示”的按钮时,API 密钥可能会显示几秒钟,或者直到用户再次单击该按钮。 它不能显示为输入字段。
这是向用户显示用户帐户详细信息的方式:
<table _ngcontent-ipg-c7="" class="table">
<thead _ngcontent-ipg-c7="" class=" text-info">
<th _ngcontent-ipg-c7="" style="text-align: center;"> Account Name </th>
<th _ngcontent-ipg-c7="" style="text-align: center;"> API Key </th>
<th _ngcontent-ipg-c7="" style="text-align: center;"> API Version </th>
<th _ngcontent-ipg-c7="" style="text-align: center;"> Imported </th>
</thead>
<tbody _ngcontent-ipg-c7="">
<tr _ngcontent-ipg-c7="" *ngIf="accountDetails">
<td _ngcontent-ipg-c7="" style="text-align: center;"> {{accountDetails?.accountID}}</td>
<td _ngcontent-ipg-c7="" style="text-align: center;"> {{accountDetails?.apiKey}}</td>
<td _ngcontent-ipg-c7="" style="text-align: center;"> {{accountDetails?.apiVersion}}</td>
<td _ngcontent-ipg-c7="" style="text-align: center;">
{{accountDetails?.is_imported}} </td>
</tr>
</tbody>
</table>
最快的解决方案是在 html 中创建函数和写入函数。
<td _ngcontent-ipg-c7=""(click)="showApi()" style="text-align: center;"> {{getApiPass()}}</td>
isshow=false;
getApiPass(){
if(this.isshow){
return this.accountDetails?.apiKey;
}
return "******";
}
单击只需更改以下显示此类功能;
showApi(){
this.isshow=!this.isshow;
}
这是示例代码,您应该使用真实的参数名称更改参数名称。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.