如何在離子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中製作字母索引列表？

回答

相關問題