2017-07-27 10 views
0

am新しいionic 2 angular developmentについて私は連絡先のようなアルファベット順インデックスリストを作成したいのですがどのように実現するのですか?これは、TSページですイオン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> 

:これまでのところ、これは私のhtmlページで私がしようとしているものを投稿してみましょう

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 

感謝!!

答えて

0

ウェブサービスから配列をソートするか、ソートパイプをngforに追加することができますが、あなた自身で書く必要があります(angular1はこれを実装しています)。

コードは次のようになります:

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

は、ソートのパイプを書く方法についてのこの記事をチェックしてください:https://stackoverflow.com/a/35158836/2157581

関連する問題