时间戳

首页 > 解决方案 > 如何在angular2+中显示隐藏（星**）代替密码

angular - 如何在angular2+中显示隐藏（星**）代替密码

问题描述

我必须在 UI 的表格中显示密码列。但是，我希望隐藏密码（由 -->** 表示）。那么我该怎么做呢。我通过 *ngFor 显示数据。

代码 -

组件.html

   <tbody>
    <tr *ngFor="let data of result| orderBy: key : reverse|filter:filter| 
    paginate: { itemsPerPage: 5, currentPage: p }; let i = index">
      <td>
        <a [hidden]= "accessIdHide" [routerLink]="['/eai/update- 
       inward-
   filter']"  (click)="forUpdateInward(data)" data-toggle="tooltip"  
   title="Update" >
          <span class="glyphicon glyphicon-plus-sign"></span>
        </a>{{data.SENDER_ID}}
      </td>
      <td>{{data.SERVICE_ID}}</td>
      <td>{{data.INWARD_IP}}</td>
      <td>{{data.INWARD_PORT}}</td>
      <td>{{data.USER_ID}}</td>
      <td>{{data.PASSWORD}}</td>
    </tr>
    </tbody>

组件.ts

 export class InwardFilterMasterComponent implements OnInit {

 ngOnInit() {

  this.viewData();
  }


  viewData() {

   //Get the data from the database via http request

   this.loading = true;
   var url = config.url;
   var port = config.port;
   this.http.post("http://....) })
  .map(result => this.result = result.json())
  .subscribe((res: Response) => {
    this.loading = false;
    console.log("XXXXXXXXXXXX", res);
    });
   console.log("INSIDE COMPONENT");

  }
 }

标签： angular

解决方案

如果你想用星星代替显示密码是没有意义的（我想显示密码根本没有意义）。如果您不关心取决于密码长度的星数，您可以显示纯文本“******”。如果您关心星数，您可以显示方法 hashPassword(data.PASSWORD) 的结果，并在您的 ts 文件中将其声明为：

  hashPassword(password: string){
    return "*".repeat(password.length)
  }

推荐阅读