app-gift/app-angular/src/modules/lesson/contact-list/contact-list.component.html

<ion-header [translucent]="true">
  <ion-toolbar>
   
    <ion-buttons slot="start">
      <ion-button routerLink="/lesson/me" fill="clear" color="dark">
          <ion-icon name="chevron-back-outline" size="small"></ion-icon>返回</ion-button>
  </ion-buttons>
    <ion-buttons slot="end">
      <ion-button routerLink="/user/add">
          <ion-icon slot="start" name="create-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
  </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()" placeholder="搜一搜"></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>