如何显示角7使用正则表达式的数据过滤器(How to show the data filter by

2019-09-28 01:13发布

我的工作角7项目。 我有具有一定的正则表达式,如下所示一个Config.json。 我有我想要筛选并显示相匹配的正则表达式的一些静态数据。

Config.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}}

这是行不通的。 有人能帮助我吗。 我是新来的角/ JavaScript的。

Answer 1:

您可以通过创建自定义管道实现这一目标。

创建管道和中的AppModule添加它里面declarations数组:

因此,在这种情况下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



文章来源: How to show the data filter by regular expression in Angular 7