如何在角度视图中用空格()替换下划线(_)？

Question

我在表格的标题中显示数组键，我的钥匙中有下划线。我想用HTML表中的空间代替下划线。我不想在组件中做其他要求。

<table>
   <thead>
       <tr>
           <th *ngFor="let header of printFields">{{header}}</th>
       </tr>
   </thead>
   <tbody>
       <tr *ngFor="let ab of printData">
           <td *ngIf="ab.Bill_Number">{{ab.Bill_Number}}</td>
           <td>.....</td>
           <td>.....</td>
       </tr>     
   </tbody>
</table>

Answer 1

如果只有一个实例，则可以使用

 {{ header.replace('_', ' ') }} 

否则您必须使用过滤器

App.filter('strReplace', function () {
 return function (input, from, to) {
 input = input || '';
 from = from || '';
 to = to || '';
 return input.replace(new RegExp(from, 'g'), to);
 };
});

并像

一样使用它

 {{ header | strReplace:'_':' ' }}

希望这会有所帮助： - (

Answer 2

您可以使用管道

https://angular.io/guide/pipes

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'replaceUnderscore'})
export class ReplaceUnderscorePipe implements PipeTransform {
  transform(value: string): string {
    return value? value.replace(/_/g, " ") : value;
  }
}

然后像

一样使用它

{{ header|replaceUnderscore}}

您还可以制作一个更通用的版本，以替换模式和替换为参数，例如 @ash-b的angularjs的答案

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'replace'})
export class ReplacePipe implements PipeTransform {
  transform(value: string, strToReplace: string, replacementStr: string): string {
    if(!value || ! strToReplace || ! replacementStr)
    {
      return value;
    }
 return value.replace(new RegExp(strToReplace, 'g'), replacementStr);
  }
}

并像

一样使用它

{{ header| replace : '_' : ' ' }} 

这是Stackblitz上的演示

Answer 3

您可以执行以下操作：

1. 创建管道

2. 在变换方法中编写以下

   transform(value: any, args?: any): string {
       let [first, ...rest] = value.split("_");
       if (rest.length === 0) return first;
       else return `${first} ${rest.join(" ")}`;
   }
   

   此代码将处理键是否有强调。

   • key = angular_7 => Angular 7
   • key = angular =>角

Answer 4

this casular 6：

 underscore(selectkpi){
    this.selectedUnderKpi = selectkpi.replace(' ', '_');
    var a = this.selectedUnderKpi.
    console.log("ini = ",a);
  }

Answer 5

简单地将正则用作 -

header.replace(/_/g, " "); // if you need space
header.replace(/_/g, ""); //if you don't need space