一、html文件

// app.component.html
<div class="detail-staus" *ngFor="let status of detailStatusData">
  <div>{{status | detailStatus }}</div>

二、ts文件数组数据

// app.component.ts
detailStatusData = [
    'ISSUE_CONFIRMED',  // ---> Issue confirmed
    'NO_ISSUE',
    'REVIEW_REQUIRED',
    'REVIEW_REQUIRED',

三、新建pipe.ts文件

cd 到你想要的文件目录
ng g  pipe detailStatus // 你的pipe名字
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'detailStatus',
export class DetailStatusPipe implements PipeTransform {
//value就是数据绑定遍历的每一项
  transform(value: string): any {
    temp = value.toLowerCase().split('_');  //---> [ 'issue', 'confirmed' ]
// 对第一项的第一个字母大写,然后拼接起来就是新的第一项
    temp[0] = temp[0].charAt(0).toUpperCase() + temp[0].slice(1);
// temp[0] = temp[0].substring(0, 1).toUpperCase() + temp[0].substring(1);
    const strValue = temp.join(' '); // join方法不会改变原数组,会产生新数组
    return strValue;

app.module.ts

  • 或者写在你想声明该pipe的其他module文件里
  • eg:比如我项目里是有专门的pipe文件,有专门的pipe.module.ts,那就把该pipe写进去,统一app.module.ts会引用所需的所有module
  •