Question

我正在从事Angular 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

我试图这样使用

无法正常工作。有谁可以帮助我吗。我是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

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

{{sampledata | filter：myregExp}}

1 个答案: