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

Question

我有下拉组件(信用卡列表)，它在 input 上绑定(bind)下拉值，使用 ngModel 我设法在输入上绑定(bind)下拉值，然后我需要显示输入字段中的信用卡号看起来像项目符号特殊字符:

4444 •••• •••• 4444

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

ma​​sk.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 ●●●● ●●●● 1111

这是我的 stackblitz demo ，有没有关于如何解决这个问题或更好的做法的建议？

Answer 1

你的方法看起来很完美，

只需将 ● 替换为 ●

像这样:

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

Working Demo