在 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(){

  if(this.isshow){

    return this.accountDetails?.apiKey;

  }

  return "******";

}

单击只需更改 isshow 下面的这样的功能；

showApi(){

  this.isshow=!this.isshow;

}

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