如何在Angular 7中通过正则表达式显示数据过滤器

Question

我正在开发 Angular 7 项目。我有一个 Config.json，它有一些正则表达式，如下所示。我有一些静态数据要过滤并显示以匹配正则表达式。

配置.json

{
"myregExp" : "[0-9],\\d,\\d,-,[0-9],\\d,\\d,\\d,\\d,\\d,-,[0-9],\\d,\\d"
}

samplepage.component.html

<h1>{{sampledata}}</h1>

sample.component.ts

this.sampledata= "123456789321";

我希望输出为 123-456789-321

我试过这样用

{{样本数据 |过滤器：myregExp}}

不起作用。有人能帮助我吗。我是 Angular/javascript 的新手。

Answer 1

您可以通过创建自定义管道来实现。

创建管道并将其添加到declarations数组内的AppModule中：

所以在本例中 AppModule.ts 的代码如下所示：

import { CustomPipePipe } from './app/custom-pipe.pipe';

@NgModule({
  ......
  ......
  declarations: [CustomPipePipe],
  ......
})

自定义管道代码：

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

@Pipe({
  name: 'customPipe'
})
export class CustomPipePipe implements PipeTransform {

  transform(value: any, args?: any): any {
    var disco = this.AddDashes(value, 3, 6).join('-')
    console.log(disco)
    return disco;
  }


  AddDashes(str, firstGroup, SecondGroup) {
    var response = [];
    var isSecondValue = false;

    for (var i = 0; i < str.length; i += firstGroup) {
      if (!isSecondValue) {
        firstGroup = 3;
        response.push(str.substr(i, firstGroup));
        isSecondValue = true;
      }
      else {
        response.push(str.substr(i, SecondGroup));
        isSecondValue = false;
      }
    }
    return response
  };
}

并在 HTML 中使用如下：

{{ your_value | customPipe}}

WORKING_DEMO