如何在 ionic 2 中制作字母索引列表？答案

【问题标题】：How to make alphabet index list in ionic 2?如何在 ionic 2 中制作字母索引列表？
【发布时间】：2017-07-27 11:51:54
【问题描述】：

我是 ionic 2 角度开发的新手，我想创建像联系人一样的字母索引列表如何实现？让我发布到目前为止我尝试过的内容这是我的 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>

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

提前致谢！！

【问题讨论】：

标签： angular cordova ionic-framework ionic2

【解决方案1】：

您可以从 web 服务对数组进行排序，也可以将排序管道添加到您的 ngfor，但您必须自己编写（angular1 已实现此功能）。

代码如下所示：

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

查看这篇关于如何编写排序管道的帖子：https://stackoverflow.com/a/35158836/2157581

【讨论】：