且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2023-02-26 15:54:21

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

You can achieve that by creating Custom Pipe.

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

Create Pipe and Add it in AppModule inside declarations array:

因此,在这种情况下,AppModule.ts代码如下:

So in this case AppModule.ts Code looks like:

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的格式使用它:

And use it in HTML Like:

{{ your_value | customPipe}}

WORKING_DEMO