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

Question

我想更改 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>

迈森

"FACETLIST":{
    "FACET":[
      {
        "@NAME":"creator",
        "@COUNT":"2"
      },
      {
        "@NAME":"lang",
        "@COUNT":"1"
      },
      {
        "@NAME":"rtype",
        "@COUNT":"1"
      }
    ],
    "FACET":[
      {
        "@NAME":"lang",
        "@COUNT":"4"
      },
      {
        "@NAME":"rtype",
        "@COUNT":"2"
      }
]
}

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

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

但是我不想更改json中的值(我想更改在页面中显示的内容(

Answer 1

所以我认为对于你的*ng，你可以使用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