Question

我有一个下拉组件（信用卡列表），它绑定input上的下拉值，使用ngModel设法将下拉值绑定到输入上，然后我需要在输入字段上显示信用卡号看起来像子弹头特殊字符：

4444 •••• •••• 4444

通过使用pipe，我设法将其绑定到下拉组件上，但是由于input，将其绑定到ngModel时出现了问题，这是我尝试过的：

mask.pipe.ts

transform(value: string, showMask :boolean): string {

    if (typeof value === "number") {
        value = JSON.stringify(value);
    }

    if (!showMask || value.length < 16) {
        return value;
    }

    return `${value.substr(0, 4)} ${'&#x25cf;'.repeat(4)} ${'&#x25cf;'.repeat(4)} ${value.substr(value.length - 4, value.length)}`;
}

html组件

  <input placeholder="value"
    [ngModel]="selectedCard.value | maskInput: true"
    (ngModelChange)="selectedCard.value = $event"type="text">

，输出为：

1111 &#x25cf;&#x25cf;&#x25cf;&#x25cf; &#x25cf;&#x25cf;&#x25cf;&#x25cf; 1111

这是我的stackblitz demo，是否有解决此问题的建议或更好的做法？

Answer 1

您的方法似乎很完美

只需将&#x25cf替换为●

赞：

 return `${value.substr(0, 4)} ${'●'.repeat(4)} ${'●'.repeat(4)} ${value.substr(value.length - 4, value.length)}`;

Working Demo

Answer 2

使用Unicode字符：stackblitz

  transform(value: string, args?: any): any {
    const start = value.substr(0, 4);
    const end = value.substr(-4, 4);
    const bullets = '\u2022';
    return `${start} ${bullets.repeat(4)} ${bullets.repeat(4)} ${end}`;
  }

Unicodes codes

如何使用ngModel Angular在输入文本中使用管道

2 个答案: