form.component.html 4.32 KB
<div class="model-content">
  <div nz-row>
    <div nz-col nzOffset='4'>
      <h1 nz-title>课程练习内容编辑</h1>
    </div>
  </div>

  <div nz-row>
    <div nz-col [nzSpan]="20" nzOffset="2">
      
      <div>
        <div *ngFor="let data of item.exercisesArr;let j = index" class="card-item" style="padding: 0.5vw;">
          <div class="border">
            <nz-divider nzText="内容-{{j+1}}" nzOrientation="left"></nz-divider>
            <nz-form-item>
              <button style="margin: 10px;" nz-button nzType="danger"
                (click)="deleteExercises(item, 'exercisesArr', j)">
                <span>删除</span>
              </button>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label [nzSpan]="6" nzFor="{{j}}.audioUrl">音频</nz-form-label>
              <nz-form-control [nzSpan]="12">
                <app-audio-recorder id="{{j}}.audioUrl" [audioUrl]="data.audioUrl"
                  (audioUploaded)="onAudioUploadSuccess($event, data, 'audioUrl')">
                </app-audio-recorder>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label [nzSpan]="3" nzFor="{{j}}.answerIndex">正确答案</nz-form-label>
              <nz-form-control [nzSpan]="6">
                <nz-radio-group [(ngModel)]="data.right" (ngModelChange)="save()">
                  <label nz-radio nzValue="L">答案1</label>
                  <label nz-radio nzValue="R">答案2</label>
                </nz-radio-group>
              </nz-form-control>
            </nz-form-item>
            <div nz-col [nzSpan]="12">
              <nz-card nzTitle="备选答案1">
                <nz-form-item>
                  <nz-form-label [nzSpan]="6" nzFor="{{j}}.leftAnswer.audioUrl">音频</nz-form-label>
                  <nz-form-control [nzSpan]="12">
                    <app-audio-recorder id="{{j}}.leftAnswer.audioUrl" [audioUrl]="data.leftAnswer.audioUrl"
                      (audioUploaded)="onAudioUploadSuccess($event, data.leftAnswer, 'audioUrl')">
                    </app-audio-recorder>
                  </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                  <nz-form-label [nzSpan]="6">图片</nz-form-label>
                  <nz-form-control [nzSpan]="6">
                    <app-upload-image-with-preview style="width: 100%" [picUrl]="data.leftAnswer.picUrl"
                      (imageUploaded)="onImageUploadSuccess($event, data.leftAnswer, 'picUrl')">
                    </app-upload-image-with-preview>
                  </nz-form-control>
                </nz-form-item>

              </nz-card>
            </div>
            <div nz-col [nzSpan]="12">
              <nz-card nzTitle="备选答案2">
                <nz-form-item>
                  <nz-form-label [nzSpan]="6" nzFor="{{j}}.rightAnswer.audioUrl">音频</nz-form-label>
                  <nz-form-control [nzSpan]="12">
                    <app-audio-recorder id="{{j}}.rightAnswer.audioUrl" [audioUrl]="data.rightAnswer.audioUrl"
                      (audioUploaded)="onAudioUploadSuccess($event, data.rightAnswer, 'audioUrl')">
                    </app-audio-recorder>
                  </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                  <nz-form-label [nzSpan]="6">图片</nz-form-label>
                  <nz-form-control [nzSpan]="6">
                    <app-upload-image-with-preview style="width: 100%" [picUrl]="data.rightAnswer.picUrl"
                      (imageUploaded)="onImageUploadSuccess($event, data.rightAnswer, 'picUrl')">
                    </app-upload-image-with-preview>
                  </nz-form-control>
                </nz-form-item>
              </nz-card>
            </div>
          </div>
        </div>
      </div>
      <div id='listen-anchor'>
        <nz-divider nzText="练习题" nzOrientation="left"></nz-divider>
        <nz-form-item>
          <nz-form-label [nzSpan]="6" nzFor="exercises">操作</nz-form-label>
          <nz-form-control [nzSpan]="6">
            <button nz-button nzType="dashed" class="add-btn" id="add-btn" (click)="addExercises(item, 'exercisesArr')">
              <i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加
            </button>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
  </div>


</div>