FashionMagicMirror/src/app/tab2/tab2.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>好友列表</ion-title>
    <ion-searchbar [(ngModel)]="searchTerm" (ionChange)="filterFriends()"></ion-searchbar>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item *ngFor="let friend of filteredFriends">
      <ion-avatar slot="start">
        <ion-icon name="person"></ion-icon>
      </ion-avatar>
      <ion-label>
        <h2>{{ friend.name }}</h2>
        <p>Phone: {{ friend.phoneNumber }}</p>
        <p>Gender: {{ friend.gender }}</p>
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>