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

Question

I use NgFor to generate the component but some text in the button need to remove. For example,the text in the array is RCDD06.But i want to display it as 06 and the data in the array is unchanged.I have stuck in here about 4hours

Here is the array:

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

Here is the code in the html:

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

Answer 1

create an custom pipe and change the text by string replace() method

html

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

pipe.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, "");
  }

}

import your pipe in declarations of your app.module.ts file

Refer the demo link