Question

我想屏蔽一个字段，例如：电话号码为10位（123-123-1234）我需要屏蔽（xxx-xxx-1234）。另外，在提交页面时，我需要将原始变量（123-123-1234）发送到服务。

非常感谢任何帮助。

感谢。

Answer 1

您可以为它创建一个管道，如下所示：

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

@Pipe({
  name: 'mask'
})
export class NumberMaskPipe implements PipeTransform {
  transform(number: string): string {
    const visibleDigits = 4;
    let maskedSection = number.slice(0, -visibleDigits);
    let visibleSection = number.slice(-visibleDigits);
    return maskedSection.replace(/./g, '*') + visibleSection;
  }
}

在您的组件中，您可以：

export class PhoneNumberComponent implements OnInit {
  phoneNumber: string;

  constructor() {}

  ngOnInit() {
    this.phoneNumber = "2131232131238867";
  }
}

最后在组件中：

<p>Your phone number is: {{ phoneNumber | mask }}</p>

此处的管道是动态的，因此即使用户输入不同数量的数字，它也只会屏蔽直到最后四位数字。请尝试使用不同位数的示例。

这是一个工作的掠夺者：https://plnkr.co/edit/NKRQpVB1Darw8MxrqucP?p=preview

Answer 2

这是使用Angular管道的一个很好的例子：

创建一个pipe：mask.pipe.ts：

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

@Pipe({ name: 'mask' })
export class MaskPipe implements PipeTransform {
    transform(phrase: string) {    
        let toBeReplaced = phrase.slice(0, 7);
        return phrase.replace(toBeReplaced, "xxx-xxx");
    }
}

将管道放入模块的声明中：

import { MaskPipe } from "./mask.pipe";
@NgModule({
    declarations: [ MaskPipe ]
    // ...
})

在模板中使用管道：

//组件类：

export class AppComponent  {
    number: string = "123-123-1234";
}

//组件模板：

<h1> {{ number | mask }}</h1>

数字的值不会改变，只有显示的值会改变

Answer 3

您可以发布一些代码，我们不应该猜测它。

无论如何，你可以创建一个这样的对象

let phoneBundle = {
    realPhone: '123-123-1234',
    displayPhone: 'xxx-xxx-' + this.phoneBundle.realPhone.substr(-1, 4)
};

Angular 2 Field Masking

3 个答案: