angular - 如何在 Angular 2 中显示隐藏的(星号 **)代替密码

Question

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

代码-

component.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>

component.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");

  }
 }

Answer 1

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

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