myapp_lifevault/src/app/contact/contact.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="tabs"></ion-back-button>
    </ion-buttons>
    <ion-title>
      个人信息
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-card>
    <ion-card-header>
      <ion-card-title>
        <ion-avatar style="width: 80px; height: 80px; margin-left: 39%;">
          <img src="{{ linkman?.get('user')?.get('avatar') }}" alt="头像">
        </ion-avatar>
      </ion-card-title>
    </ion-card-header>
  </ion-card>

  <ion-card style="margin: 20px;">
    <ion-list style="margin: 15px;">
      <ion-item button (click)="editProfile('name')">
        <ion-label>姓名</ion-label>
        <ion-note slot="end">{{ linkman?.get('user')?.get('username') }}</ion-note>
      </ion-item>
      <ion-item button (click)="editProfile('birthday')">
        <ion-label>生日</ion-label>
        <ion-note slot="end">{{ linkman?.get('user')?.get('birthday')|date:'yyyy-MM-dd' }}</ion-note>
      </ion-item>
  
      <ion-item button (click)="editProfile('relationship')">
        <ion-label>与TA的关系</ion-label>
        <ion-note slot="end">{{ profile?.relationship }}</ion-note>
      </ion-item>
      <ion-item>
        <ion-label>性别</ion-label>
        <ion-select [(ngModel)]="profile.gender" interface="popover">
          <ion-select-option value="male">男性</ion-select-option>
          <ion-select-option value="female">女性</ion-select-option>
          <ion-select-option value="none">无性别者</ion-select-option>
        </ion-select>
      </ion-item>
      <ion-item button (click)="editProfile('contact')">
        <ion-label>联系方式</ion-label>
        <ion-note slot="end">{{ linkman?.get('user')?.get('mobile') }}</ion-note>
      </ion-item>
    </ion-list>
  </ion-card>

  <ion-card style="margin: 20px;">
    <ion-list>
      <ion-item button (click)="editProfile('hobbies')">
        <ion-label>爱好</ion-label>
        <ion-note slot="end">{{ linkman?.get('hobby') }}</ion-note>
      </ion-item>
      <ion-item button (click)="editProfile('taste')">
        <ion-label>口味</ion-label>
        <ion-note slot="end">{{ linkman?.get('taste') }}</ion-note>
      </ion-item>
      <ion-item button (click)="editProfile('habits')">
        <ion-label>习惯</ion-label>
        <ion-note slot="end">{{ linkman?.get('habit') }}</ion-note>
      </ion-item>
      <ion-item button (click)="editProfile('dislikes')">
        <ion-label>讨厌</ion-label>
        <ion-note slot="end">{{ linkman?.get('disgusting') }}</ion-note>
      </ion-item>
    </ion-list>
  </ion-card>
</ion-content>