s202226701049/AIart-app/src/app/interest-search/interest-search.component.html

<!-- src/app/interest-search/interest-search.component.html -->
<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button default-href="/tabs/tab1" style="color:black;"></ion-back-button>
    </ion-buttons>
    <ion-title style="font-family: 'Courier New', Courier, monospace;">
      <span style="font-weight: bold;">调查问卷</span>
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content color="light">
  <!-- 一、基本情况 -->
  <ion-list [inset]="true">
    <ion-item>
      <ion-label>一、基本情况</ion-label>
    </ion-item>
    <ion-item>
      <ion-label position="floating">姓名</ion-label>
      <ion-input [(ngModel)]="name"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="floating">生日</ion-label>
      <ion-datetime displayFormat="YYYY-MM-DD" [(ngModel)]="birthday"></ion-datetime>
    </ion-item>
  </ion-list>

  <!-- 二、问卷问题 -->
  <ion-list [inset]="true">
    <!-- 遍历 questionsWithOptions 逐个显示问题 -->
    <div *ngFor="let question of questionsWithOptions">
      <!-- 问题文本 -->
      <ion-item>
        <ion-label>{{ question.questionText }}</ion-label>
      </ion-item>

      <!-- 选项列表 -->
      <ion-radio-group [(ngModel)]="answers[question.QuestionId]" [allowEmptySelection]="true">
        <!-- 如果选项还未加载完，显示加载中 -->
        <ion-item *ngIf="!question.optionsData || question.optionsData.length === 0">
          <ion-label>加载中...</ion-label>
        </ion-item>

        <!-- 加载完成后显示选项 -->
        <ion-item *ngFor="let option of question.optionsData">
          <ion-radio slot="start" [value]="option.OptionId"></ion-radio>
          <ion-label>{{ option.optionText }}</ion-label>
        </ion-item>
      </ion-radio-group>
    </div>
  </ion-list>

  <!-- 保存和提交按钮 -->
  <div style="display: flex; justify-content: space-between; align-items: center; margin: 0 15px;">
    <ion-button style="width: 45%;" (click)="save()">保存</ion-button>
    <ion-button id="yes/no" style="width: 45%;">提交</ion-button>
    <ion-alert trigger="yes/no" header="是否确定提交" [buttons]="alertButtons"></ion-alert>
  </div>
</ion-content>