Question

我必须在UI中的表格中显示密码列。但是，我希望隐藏密码（用 - ＆gt; **表示）。那么我该怎么做。我通过* 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)
  }

Answer 2

使用像这样的自定义方法解析 -

convertPassword(password) {
    let password = password.toString();
    let encryPass = '*';
    for(let i=0; i< password.length -1 ;i++){
        encryPass =  encryPass + '*';
    }
    return encryPass;
}


{{convertPassword(data.PASSWORD)}}

Answer 3

您可以创建pipe，例如password并将其应用于您的价值。管道的好处是您可以在整个应用程序中使用它，并且单个文件的更改将反映在使用管道的所有位置。

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'password'
})
export class PasswordPipe implements PipeTransform {

  transform(value: string, replaceChar?: string): any {
    if (value === undefined) {
      return value;
    }
    // Replace with the specified character
    if (replaceChar) {
      return replaceChar.repeat(value.length);
    }
    // Replace value with asterisks
    return '*'.repeat(value.length);
  }
}

在你的对象属性上使用它，如下所示：

<td>{{data.PASSWORD | password}}</td>

您甚至可以使用竖线来指定自己的替换字符而不是＆＃34; *＆＃34;例如

<td>{{data.PASSWORD | password:'+'}}</td>

StackBlitz Demo

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

3 个答案: