javascript - ionic3 - 如何删除 ngFor 组件中的文本

Question

我使用 NgFor 生成组件，但按钮中的一些文本需要删除。例如，数组中的文本是RCDD06。但是我想将其显示为06，并且数组中的数据不变。我在这里卡了大约4个小时

这是数组:

[{"name":"RCDD01"},{"name":"RCDD02"},{"name":"RCDD03"},{"name":"RCDD04"},{"name":"RCDD05"},{"name":"RCDD06"}]

这是 html 中的代码:

<button ion-button *ngFor="let item of device"  (click)="getData(item.name)">{{item.name}}</button>

Answer 1

创建自定义管道并通过字符串replace()方法更改文本

html

<button ion-button *ngFor="let item of device"  (click)="getData(item.name)">{{item.name | remChar}}</button>

管道.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'remChar'
})
export class RemCharPipe implements PipeTransform {

  transform(value: any): any {
    return value.replace(/[a-z]|[A-Z]/g, "");
  }

}

在 app.module.ts 文件的声明中导入管道

引用演示 link