原数据样子
字符串首字母大写 + 字符串分割
目标
- ISSUE_CONFIRMED ---- > Issue confirmed
思路
- 引入pipe功能 Pipe, PipeTransform
- 数据差值表达式 {{status | detailStatus }}
- 全小写+ split + join
一、html文件
// app.component.html
<div class="detail-staus" *ngFor="let status of detailStatusData">
<div>{{status | detailStatus }}</div>
</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
import { DetailStatusPipe } from './pipes/detail-status.pipe'; // 导包
declarations: [ // 声明
DetailStatusPipe
]
