Question

我在Angular-Electron应用程序中使用Angular 8。我有一个以表格格式存储的API密钥字段，该字段非常敏感，需要在用户的帐户页面上显示给用户。问题在于它需要显示为密码文本字段。每当用户单击名为“ Show”的按钮时，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>

Answer 1

最快的解决方案是用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;
}

这是示例代码，您应该更改真实名称的参数名称。

在Angular中将文本字段（非输入字段）显示为类型密码

1 个答案: