Question

我是离子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 });
    }
    }

我从webservice获取数据我的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

提前致谢!!

Answer 1

您可以从Web服务中对数组进行排序，也可以在ngfor中添加排序管道，但您必须自己编写（angular1已实现）。

代码看起来像这样：

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

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

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

1 个答案: