ionic3 - 我如何删除 ngFor 组件中的文本
ionic3 - how can i remove the text in the ngFor component
我使用 NgFor 生成组件,但按钮中的一些文本需要删除。
例如,数组中的文本是 RCDD06.But 我想将其显示为 06 并且数组中的数据是 unchanged.I 在这里停留了大约 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>
创建自定义管道并通过字符串 replace() 方法更改文本
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, "");
}
}
在 app.module.ts 文件的声明中导入管道
参考演示 link
我使用 NgFor 生成组件,但按钮中的一些文本需要删除。 例如,数组中的文本是 RCDD06.But 我想将其显示为 06 并且数组中的数据是 unchanged.I 在这里停留了大约 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>
创建自定义管道并通过字符串 replace() 方法更改文本
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, "");
}
}
在 app.module.ts 文件的声明中导入管道
参考演示 link