Ionic3：如何在NgFor生成的按钮中截取文本且不修改原数组？

嘿，卡了4小时确实够闹心的，别慌，这问题其实有好几种简单的解决方式，而且完全不会改动你的原数组数据，放心用就行！

方法一：模板内直接处理（最快实现） #

因为你的前缀RCDD是固定4个字符，直接在模板里用字符串的slice方法截取后面的部分就好，点击事件还是用原item.name，完全不影响：

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

如果以后前缀长度可能变化，也可以用replace方法精准替换掉RCDD：

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

方法二：自定义管道（更优雅，适合多处复用） #

如果这个“移除前缀”的逻辑在项目里多个地方都要用，写个自定义管道会更规范，维护起来也方便：

1. 创建管道文件 #

比如remove-prefix.pipe.ts：

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

@Pipe({
  name: 'removePrefix'
})
export class RemovePrefixPipe implements PipeTransform {
  transform(value: string, prefix: string = 'RCDD'): string {
    // 严谨点可以先判断是否以指定前缀开头
    return value.startsWith(prefix) ? value.slice(prefix.length) : value;
  }
}

2. 在模块中声明管道 #

记得把这个管道加到你的NgModule的declarations数组里，不然模板识别不了：

import { RemovePrefixPipe } from './remove-prefix.pipe';

@NgModule({
  declarations: [
    // ...其他组件、指令
    RemovePrefixPipe
  ]
})
export class YourModule { }

3. 在模板中使用管道 #

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

如果以后要换前缀，还可以传参数：{{item.name | removePrefix:'NEWPREFIX'}}

两种方法都能满足你的需求，第一种快，第二种更灵活，看你场景选就行～

内容的提问来源于stack exchange，提问作者Parco A