在 Angular 中將文本字段（不是輸入字段）顯示為輸入密碼

Question

我將 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>

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;
}

這是示例代碼，您應該使用真實的參數名稱更改參數名稱。