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

Question

我正在将 Angular 8 用于我的 Angular-Electron 应用程序。我有一个以表格格式存储的 API 密钥字段，该字段非常敏感，需要在用户的帐户页面上向用户显示。问题是它需要显示为密码文本字段。每当用户单击名为“显示”的按钮时，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(){&nbsp; if(this.isshow){&nbsp; &nbsp; return this.accountDetails?.apiKey;&nbsp; }&nbsp; return "******";}单击只需更改 isshow 下面的这样的功能；showApi(){&nbsp; this.isshow=!this.isshow;}这是示例代码，您应该用真实的参数名称更改参数名称。