Показывать текстовое поле (не поле ввода) как пароль типа в Angular

Question

Я использую Angular 8 для моего Angular -электронного приложения. У меня есть поле в виде 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 "******";
}

с помощью щелчка мышью, просто измените эту функцию, как показано ниже;

showApi(){
  this.isshow=!this.isshow;
}

это пример кода, который вы должны изменить имена параметров с реальными.