AI/myapp/src/lib/user/modal-user-edit/modal-user-edit.component.html

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>编辑资料</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="cancel()">
        <ion-icon name="close-outline" slot="icon-only"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <ion-list>
    <ion-item>
      <ion-icon name="person-outline" slot="start"></ion-icon>
      <ion-input [value]="userData['username']" (ionChange)="userDataChange('username',$event)" label="用户名"
        label-placement="floating" placeholder="请输入用户名">
      </ion-input>
    </ion-item>

    <ion-item>
      <ion-icon name="id-card-outline" slot="start"></ion-icon>
      <ion-input [value]="userData['realname']" (ionChange)="userDataChange('realname',$event)" label="真实姓名"
        label-placement="floating" placeholder="请输入真实姓名">
      </ion-input>
    </ion-item>

    <ion-item>
      <ion-icon name="calendar-outline" slot="start"></ion-icon>
      <ion-input type="number" [value]="userData['age']" (ionChange)="userDataChange('age',$event)" label="年龄"
        label-placement="floating" placeholder="请输入年龄">
      </ion-input>
    </ion-item>

    <ion-item>
      <ion-icon name="transgender-outline" slot="start"></ion-icon>
      <ion-label>性别</ion-label>
      <ion-segment [value]="userData['gender']" (ionChange)="userDataChange('gender', $event)">
        <ion-segment-button value="男">
          <ion-label>男</ion-label>
        </ion-segment-button>
        <ion-segment-button value="女">
          <ion-label>女</ion-label>
        </ion-segment-button>
      </ion-segment>
    </ion-item>

    <ion-item>
      <ion-icon name="image-outline" slot="start"></ion-icon>
      <ion-input [value]="userData['avatar']" (ionChange)="userDataChange('avatar',$event)" label="头像URL"
        label-placement="floating" placeholder="请输入头像URL地址">
      </ion-input>
    </ion-item>
  </ion-list>

  <div class="action-buttons">
    <ion-button expand="block" (click)="save()" color="primary" shape="round">
      <ion-icon name="save-outline" slot="start"></ion-icon>
      保存
    </ion-button>
    <ion-button expand="block" (click)="cancel()" color="medium" fill="outline" shape="round">
      <ion-icon name="close-outline" slot="start"></ion-icon>
      取消
    </ion-button>
  </div>
</ion-content>