Wie Maskierung einer Kreditkartennummer in Nativescript Angular

Question

Ich möchte Kreditkartennummer als 1234 **** 6789 Format in meiner Nativescript Angular App anzeigen. Meine Datenquelle ist ein Array. Ich zeige eine Liste von Kreditkartennummern in einer Listview an.

let creditCards = [ 
      { 
       cardNo : 123456789, 
       expiryDate: 25/12/2020, 
      }, 
      { 
       cardNo : 987654321, 
       expiryDate: 25/12/2020, 
      }, 

     ]; 

Html

<ListView [items]="creditCards"> 
    <ng-template let-item="item"> 
     <GridLayout rows="*,*" columns="*,*"> 
      <Label row="0" col=0 [text]="item.cardNo"></Label> 
      <Label row="0" col=0 [text]="item.cardNo"></Label> 
     </GridLayout> 
     </ng-template> 
</ListView> 

ich weiß, ich kann dies erreichen, indem anstelle der Cardno String. Aber Was ist der beste Weg, um die Kreditkartennummer zu maskieren, ohne die eigentliche Datenquelle zu ändern. Kann dies in HTML/CSS getan werden?

Answer 1

Es kommt mir vor, dass Sie vor dem Anzeigen der Array-Daten den Fix durch eine maskierte Funktion übergeben und dann in der Liste anzeigen, die Sie benötigen.

http://www.forosdelweb.com/f13/enmascarar-input-tarjeta-credito-954207/