如何在Nativescript Angular中屏蔽信用卡号

Question

我想在我的Nativescript Angular应用中将信用卡号显示为 1234 **** 6789 格式。 我的数据源是一个数组。我正在Listview中显示信用卡号码列表。

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>

我知道，我可以通过替换 cardNo 字符串来实现这一目标。但 在不修改实际数据源的情况下屏蔽信用卡号的最佳方法是什么。 这可以在html / css中完成吗？

Answer 1

在我看来，在显示数组数据之前，你通过一个蒙版函数传递修复，然后在你需要的列表中显示它。

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