たとえば、フィールドをマスクしたい:電話番号が10桁(123-123-1234)の場合(xxx-xxx-1234)のようにマスクする必要があります。また、ページを送信するときに、元の変数(123-123-1234)をサービスに送信する必要があります。
どんな助けでも大歓迎です。
ありがとう。
以下のようにパイプを作成できます。
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>
ここのパイプは動的であるため、ユーザーが異なる桁数を入力した場合でも、最後の4桁まではマスクされ、最後の4桁はマスクされません。桁数の異なる例も試してみてください。
これが機能するプランカーです: https://plnkr.co/edit/NKRQpVB1Darw8MxrqucP?p=preview
Angularのパイプを使用する良い例です。
パイプを作成します: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>
Numberの値は変更されず、表示される値のみが変更されます
あなたはいくつかのコードを投稿することができます、私たちはそれを推測することになっていない。
とにかく、あなたはこのようなオブジェクトを作成することができます
let phoneBundle = {
realPhone: '123-123-1234',
displayPhone: 'xxx-xxx-' + this.phoneBundle.realPhone.substr(-1, 4)
};