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>

myjson

"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 for show in page

示例creator-＆gt; Creator，lang-＆gt;语言

但我不想在json中改变值（我想改变页面中的show）

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

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

1 个答案: