我想更改 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 中的值(我想更改以在页面中显示)
最佳答案
所以我认为对于你的 *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 上:
关于javascript - 如何更改 json 中的名称以在页面中显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42071466/