javascript - 如何更改 json 中的名称以在页面中显示

Question

我想更改 json 中的名称以在页面中显示( ionic 选择)

mycodehtml

ion-select [(ngModel)]="refine" (ionChange)="optionsFn(item, i);" >
        <ion-option [value]="item"  *ngFor="let item of totalfilter;let i = index" >{{item["@NAME"]}}</ion-option>
      </ion-select>

myjson

"FACETLIST":{
    "FACET":[
      {
        "@NAME":"creator",
        "@COUNT":"2"

      },
      {
        "@NAME":"lang",
        "@COUNT":"1"
      },
      {
        "@NAME":"rtype",
        "@COUNT":"1"
      }

    ],
    "FACET":[

      {
        "@NAME":"lang",
        "@COUNT":"4"
      },
      {
        "@NAME":"rtype",
        "@COUNT":"2"
      }

]

}

上面的 ionic 选择显示创建者lang和rtype，但我想更改@NAME以在页面中显示

example creator->Creator, lang->Language

但我不想更改 json 中的值(我想更改以在页面中显示)

Answer 1

所以我认为对于你的 *ngFor 你可以使用 PipeTransform:

创建管道文件:mypipe.ts

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

@Pipe({
    name: 'mypipe', pure: false
})
export class MyPipe implements PipeTransform {

    transform(items: any[]): any[] {

        return items.filter(it => it["@NAME"] = it["@NAME"].charAt(0).toUpperCase() + it["@NAME"].slice(1));
    }

}

为您的管道添加导入:

import {MyPipe} from "./mypipe";

在声明处添加(@NgModule):

@NgModule({

  imports: [ YourModule]
  declarations: [ YourApp, MyPipe ],
  bootstrap: [ YourApp ]
})

最后，更改你的 *ngFor:

<ion-select [(ngModel)]="refine" (ionChange)="optionsFn(item, i);" >
        <ion-option [value]="item"  *ngFor="let item of totalfilter | mypipe;let i = index" >{{item["@NAME"]}}</ion-option>
      </ion-select>

Angular2 的完整解决方案，但不是 ionic2，我放在了 plunker 上:

https://plnkr.co/edit/nIYRcmHPZkhoH6PyK8o4?p=preview