app-myapp/modules/contact/contact-list/contact-list.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>通讯录</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">通讯录</ion-title>
    </ion-toolbar>
  </ion-header>
  
  <ion-searchbar [(ngModel)]="searchName" (ionInput)="search()"></ion-searchbar>

  <ion-list>
    <ng-container *ngFor="let contact of contactList;let index = index;">
      <!-- 分组：根据下标首个出现的元素显示分组分隔符 -->
      <ion-item-divider *ngIf="charGroupIndex[contact.get('firstChar')] == index">
        <ion-label>{{contact.get('firstChar')}}</ion-label>
      </ion-item-divider>
      <ion-item lines="none">
        <ion-avatar slot="start">
          <img [src]="contact.get('avatarUrl') || 'https://ionicframework.com/docs/img/demos/avatar.svg'">
        </ion-avatar>
        <ion-label>
          <h2>{{ contact.get('name') }}</h2>
          <p>性别: {{ contact.get('gender') }}</p>
          <p>手机: {{ contact.get('mobile') }}</p>
        </ion-label>
      </ion-item>
    </ng-container>
  </ion-list>
</ion-content>