0
新的離子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
在此先感謝!