如何在离子2中制作字母索引列表？

新的离子2角发展我想创建像联系人字母索引列表如何实现它？让我寄我已经试过到目前为止，这是我的html页面：如何在离子2中制作字母索引列表？

<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>

这是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 }); 
    } 
    }

我从web服务中获取数据的json格式

[{"Header":"Contract","Name":"Bal"},{"Header":"Stores","Name":"store pre"},{"Header":"Contract","Name":"Balls"},{"Header":"Stores","Name":"Tyoe"},{"Header":"Incident":"Name":"df"}]

这是从服务器获取的Json格式。

这是我的名单应该怎么样子：

Contract 
--bal 
--balls 
Stores 
--store pre 
--tyoe 
Incident 
--df

在此先感谢！

来源

2017-07-27 M.Yogeshwaran

要么你从webservice排序你的数组，或者你可以添加一个排序管道到你的ngfor，但你必须自己写（angular1有这个实现）。

的代码会是这个样子：

<ion-list *ngFor="let contracts of contractlist | sortBy ; let i = index;">

检查这个职位上如何写一个排序管：https://stackoverflow.com/a/35158836/2157581

来源

2017-07-27 11:59:55

如何在离子2中制作字母索引列表？

回答

相关问题