DYP/src/app/contact-list/contact-list.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>通讯录</ion-title>
    <ion-buttons slot="end">
      <ion-button id="add-contact">
        添加
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-modal trigger="add-contact" #modal>
  <ng-template>
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-button>取消</ion-button>
        </ion-buttons>
        <ion-title>添加联系人</ion-title>
        <ion-buttons slot="end">
          <ion-button (click)="addContact()" [strong]="true">确认</ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <ion-item>
        <ion-input  label="联系人" placeholder="输入用户名" [(ngModel)]="usernameInput" type="text"></ion-input>
      </ion-item>
    </ion-content>
   
  </ng-template>
</ion-modal>

<ion-content [fullscreen]="true">
  
  
  <ion-searchbar [(ngModel)]="searchName" (ionInput)="search()"></ion-searchbar>

  
  <ion-segment [(ngModel)]="segment" (click)="loadContact()">
    <ion-segment-button value="me">
      我的
    </ion-segment-button>
    <ion-segment-button value="all">
      全部
    </ion-segment-button>
  </ion-segment>

  <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') || contact?.get('to')?.get("nickname") ||contact?.get('to')?.get('username') }}</h2>
          <p>性别: {{ contact.get('gender') || contact?.get('to')?.get("gender") }}</p>
          <p>手机: {{ contact.get('mobile') || contact?.get('to')?.get("mobile")}}</p>
        </ion-label>
        <ion-button slot="end" routerLink="/contact/chat/{{contact?.get('to')?.id}}">聊天</ion-button>
      </ion-item>
    </ng-container>
  </ion-list>
    <!-- <span>{{ clickMsg }}</span> -->
</ion-content>