如何更改 json 中的名称以在页面中显示答案

【问题标题】：How to change name in json for show in page如何更改 json 中的名称以在页面中显示
【发布时间】：2017-06-23 14:41:24
【问题描述】：

我想更改 json 中的名称以在页面中显示（离子选择）

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>

我的json

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

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

    ],
    "FACET":[

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

]

}

上面的这个 ionic select show creator lang 和 rtype 但我想更改 @NAME 以在页面中显示

示例创建者->创建者，语言->语言

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

【问题讨论】：

您为什么不使用所需的值复制此 JSON 并在视图中使用它。或者如果检查循环并将这两个转换为所需的，则可能是脏的解决方案。

标签： javascript html json typescript ionic2

【解决方案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";

添加 at 声明 (@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

【讨论】：

好的，我更改了您的确切解决方案，使用此编辑更改您的管道，或复制完整的解决方案
嘿@fongfuse 有什么问题吗？如果您需要其他帮助，请立即联系我
如果lang ->Language ，谢谢你的帮助。 T-T
嘿@fongfuse 在管道中进行字符串替换很容易解决这个问题，所以你能接受我的解决方案吗？
如果我想让ion-select只显示lang和rtype，如何设置？ **我编辑了我的json，请阅读以上内容。