[英]How to make alphabet index list in ionic 2?
am new for ionic 2 angular development i want to create like alphabetic index list like contacts how to achieve it ? 我想创建离子2角度开发的新对象吗? let me post what i have tried so far this is my html page:
让我发布到目前为止我已经尝试过的内容,这是我的html页面:
<ion-header>
<ion-navbar color="secondary">
<ion-title>Contract</ion-title>
</ion-navbar>
</ion-header>
<ion-content >
<ion-list *ngFor="let contracts of contractlist ; let i = index;">
<ion-card >
<ion-item (click)="onClickContract($event,contracts)">
<h2> {{contracts.HeaderText}}</h2>
<p>{{contracts.SubText}}</p>
<p item-right >{{contracts.ApprovalCount}}</p>
</ion-item>
</ion-card>
</ion-list>
</ion-content>
This is ts page: 这是ts页面:
import { Component } from '@angular/core';
import { Events, NavController, NavParams, LoadingController } from 'ionic-angular';
import { ContractService } from '../../services/contract.service';
import { ViewPage } from '../view/view';
@Component({
selector: 'page-home',
templateUrl: 'home.html',
})
export class HomePage {
private contractlist:any;
result: any;
constructor( public contractservice: ContractService
,public navCtrl: NavController,
) {
this.loadcontract();
}
loadcontract() {
this.contractservice.readContract().then(data => {
this.result = data;
this.contractlist = this.result;
});
}
onClickContract(event,contracts) {
this.navCtrl.push(ViewPage, { contracts: contracts });
}
}
I am fetching data from webservice my json format will 我正在从Web服务获取数据,我的JSON格式将
[{"Header":"Contract","Name":"Bal"},{"Header":"Stores","Name":"store pre"},{"Header":"Contract","Name":"Balls"},{"Header":"Stores","Name":"Tyoe"},{"Header":"Incident":"Name":"df"}]
This is the Json format am getting from server. 这是从服务器获取的Json格式。
This is how my list should look like : 这是我的列表的样子:
Contract
--bal
--balls
Stores
--store pre
--tyoe
Incident
--df
Thanks in advance !! 提前致谢 !!
Either you sort your array from the webservice or you can add a sorting pipe to your ngfor, but you have to write it yourself (angular1 had this implemented). 您可以从Web服务对数组进行排序,也可以向ngfor添加排序管道,但必须自己编写(angular1实现了此功能)。
The code would look something like this: 代码看起来像这样:
<ion-list *ngFor="let contracts of contractlist | sortBy ; let i = index;">
Check this post on how to write a sorting pipe: https://stackoverflow.com/a/35158836/2157581 检查有关如何编写排序管道的帖子: https : //stackoverflow.com/a/35158836/2157581
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.