Angular Bootstrap Модальное значение несоответствие установки - PullRequest
Новая
       14

Angular Bootstrap Модальное значение несоответствие установки

0 голосов
/ 14 октября 2018

Обновление 2 

<div *ngFor="let c of uiVideos;let i= index" class="row curriculum-single">
    <button style="display:none" data-toggle="modal" data-target="#videoReplace"></button>
  <app-upload-modal [id]="i" ></app-upload-modal>
</div>

Обновление 1: Вот мой upload-modal.ts 

export class UploadModalComponent implements OnInit {

  constructor() { }
  @Input()
  id:number;

  @ViewChild('toggleButton') 
  private toggleButton : ElementRef;     
 
  ngOnInit() {
  }

  clickToggleButton() {
     this.toggleButton.nativeElement.click(); //trigger button click
  }

}

И upload-Modal.html 

<div class="add-popup modal fade" id="videoReplace{{index}}" #videoModal tabindex="-1" role="dialog" aria-labelledby="videoReplace">
  <button #toggleButton  style="display:none" data-toggle="modal" data-target="#videoReplace{index}"></button>
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header gredient-bg">
        <ul class="card-actions icons right-top">
          <li>
            <a href="javascript:void(0)" class="text-white" data-dismiss="modal" aria-label="Close" #closeModal (click)="hideModal">
              <i class="ti-close"></i>
            </a>
          </li>
        </ul>
        <h4 class="modal-title text-center">Replace Video</h4>
      </div>
      <div class="modal-body">
        <div class="package_summary text-center">
          <p>Please upload a MP4 file you want to replace with the existing one. This will replace <strong>{{videosToBeReplaced?.video?.title}}</strong>
          </p>
          <p-fileUpload mode='advanced' #replaceFile name="replace1[]" [url]="getReplaceUrl(videosToBeReplaced?.video?.itemId)"
            accept="video/mp4" maxFileSize="100000000" (onBeforeSend)="onBeforeSend($event)" (onProgress)="onProgressReplace($event)"
            (onSelect)="onFileSelect($event)" (onUpload)="onReplaceVideo($event)" chooseLabel="Select Video">
          </p-fileUpload>
        </div>

      </div>
    </div>
  </div>
</div>

Старый код: Первый вопрос

Вот мой компонент .html

В нижней части кода есть модальный.Модальное значение устанавливается, когда

<i (click)="OpenUploaderAndBindContent(c)" title="Replace" *ngIf="c.isEditing">

при щелчке по этому методу.Как видите, здесь нарисован список uiVideos.Для каждого элемента этого списка есть строка, генерирующая с редактированием, перемещением и несколькими действиями.Я указал действие в приведенном выше строковом коде.

Проблема: для первого ряда, связанного с uiVideos, отображаются в модальном режиме.Но следующие строки uiVideos не привязаны к модалу.

Как вы можете видеть, я проверил значение в this.videosToBeReplaced.video.itemId, и они абсолютно верны для любой из строк uiVideos список.но после запуска модального, значение становится пустым.

И ниже, есть код для отображения модального. 

<div class="row m-3 pb-3">
  <div class="border border-success col-sm-12 p-4">
    <p-fileUpload mode="advanced" multiple='true' #fileInput name="demo[]"  accept="video/mp4" [url]="getUploadUrl()"
    (onUpload)="onBasicUploadAuto($event)" customUpload="true"
    (onBeforeSend)="onBeforeSend($event)"      
    (onSelect)="onFileSelect($event)" (uploadHandler)="uploadFilesTemp($event)"
    chooseLabel="Select Videos" uploadLabel="Upload">
      <!--
         <ng-template pTemplate="toolbar">
        <div>Upload 3 Files</div>
      </ng-template>
      <ng-template let-file pTemplate="file">
        <div>Custom UI to display a file</div>
      </ng-template>
      <ng-template pTemplate="content">
        <div>Custom UI to manage uploaded files</div>
      </ng-template> -->
    </p-fileUpload>
     <p-progressBar  *ngIf="progress > 0" [value]="progress" showValue="false" mode="{{getProgressBarMode()}}"></p-progressBar> 
  </div>
</div>
<div *ngFor="let c of uiVideos;let i= index" class="row curriculum-single">
  <div class="col-sm-12">
    <div class="row border border-secondary rounded p-2 m-1">
      <div *ngIf="!c.isEditing" class="col-sm-12 p-1">
        <div class="lecture float-left">
          <span class="">
            <i class="fa fa-video-camera"></i>{{c.video.title}}</span>
        </div>
      </div>
      <div *ngIf="c.isEditing" class="col-sm-12">
        <div class="row">
          <input [(ngModel)]="c.video.title" type="text" class="form-control col-sm-12" *ngIf="c.isEditing">
        </div>
        <p-progressBar  *ngIf="c.progress > 0" [value]="progress" showValue="false" mode="{{getSingleProgressBarMode(c)}}"></p-progressBar>
      </div>


      <div class="col-sm-12 p-1">
        <div class="row">
          <app-content-status-updater [item]="c.video" itemType="video" [isEditing]="c.isEditing" class="col-sm-4"></app-content-status-updater>
          <div class="col-sm-4"></div>
          <div class="col-sm-4 p-1">
            <select [(ngModel)]="c.video.order">
              <option *ngFor="let item of uiVideos;let i=index" value="{{i+1}}">{{i+1}}</option>
            </select>
            <i (click)="onMove(c)" *ngIf="!c.isEditing" class="fa fa-arrows p-1"></i>
            <i (click)="OpenUploaderAndBindContent(c)" title="Replace" *ngIf="c.isEditing"
            class="fa fa-upload p-1"></i>
            <i (click)="onEdit(c)" *ngIf="!c.isEditing" class="ti ti-pencil-alt p-1"></i>
            <i (click)="onSave(c)" *ngIf="c.isEditing" class="fa fa-floppy-o p-1"></i>
            <i (click)="onCancel(c)" *ngIf="c.isEditing" class="fa fa-times-circle p-1"></i>

            <i (click)="onDelete(c)" *ngIf="!c.isEditing" class="fa fa-trash p-1"></i>
          </div>
        </div>


      </div>
    </div>


  </div>
</div>

<button id="videoReplaceTrigger" style="display:none" data-toggle="modal" data-target="#videoReplace"></button>
<div class="add-popup modal fade" id="videoReplace" #videoModal tabindex="-1" role="dialog" aria-labelledby="videoReplace"  >
  
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header gredient-bg">
        <ul class="card-actions icons right-top">
          <li>
            <a href="javascript:void(0)" class="text-white" data-dismiss="modal" aria-label="Close" #closeModal (click)="hideModal">
              <i class="ti-close"></i>
            </a>
          </li>
        </ul>
        <h4 class="modal-title text-center">Replace Video</h4>
      </div>
      <div class="modal-body">
        <div class="package_summary text-center">
          <p>Please upload a MP4 file you want to replace with the existing one. This will replace <strong>{{videosToBeReplaced?.video?.title}}</strong>
          </p>
          <p-fileUpload mode='advanced' #replaceFile name="replace1[]" [url]="getReplaceUrl(videosToBeReplaced?.video?.itemId)"
            accept="video/mp4" maxFileSize="100000000" 
            (onBeforeSend)="onBeforeSend($event)" 
            (onProgress)="onProgressReplace($event)"
            (onSelect)="onFileSelect($event)" 
            (onUpload)="onReplaceVideo($event)" 
            chooseLabel="Select Video">
          </p-fileUpload>
        </div>

      </div>
    </div>
  </div>
</div>

В компоненте ts следующий код определяет модальные значения videosToBeReplaced значение 

OpenUploaderAndBindContent(c: UIVideo) {
    console.log('before c: ' + c.video.itemId + ' - ' + c.video.title);
    
    this.videosToBeReplaced = new UIVideo();
    this.videosToBeReplaced = c;

    console.log(this.videosToBeReplaced.video.itemId + ' - ' + this.videosToBeReplaced.video.title);
    document.getElementById('videoReplaceTrigger').click();
  }

1 Ответ

0 голосов
/ 14 октября 2018

Issue

Ваша проблема связана с работой на одном и том же элементе DOM для каждой итерации цикла for.

См. Вашу функцию OpenUploaderAndBindContent.

OpenUploaderAndBindContent(c: UIVideo) {
    console.log('before c: ' + c.video.itemId + ' - ' + c.video.title);

    this.videosToBeReplaced = new UIVideo();
    this.videosToBeReplaced = c;

    console.log(this.videosToBeReplaced.video.itemId + ' - ' + this.videosToBeReplaced.video.title);
    document.getElementById('videoReplaceTrigger').click(); <-- ISSUE 1
  }

Вы запускаете одну и ту же кнопку для каждого видео, и в конце концов она попытается открыть один и тот же модал.Потому что кнопка нацелена на тот же модал id=videoReplace.Смотрите ниже фрагмент.button нацелен на videoReplace. 

<button id="videoReplaceTrigger" style="display:none" data-toggle="modal" data-target="#videoReplace"></button>
<div class="add-popup modal fade" id="videoReplace" #videoModal tabindex="-1" role="dialog" aria-labelledby="videoReplace"  >

Решение

Решение вашей проблемы -

  1. Не нацеливайтесь на те же button иmodal от id.
  2. Вы должны создать несколько модальных для каждого видео, поэтому создайте новый modal component скажем modal-component
  3. Переместите в него следующий модальный контент.

Сделайте набор динамическим button и model id, используя @Input. 

  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header gredient-bg">
        <ul class="card-actions icons right-top">
          <li>
            <a href="javascript:void(0)" class="text-white" data-dismiss="modal" aria-label="Close" #closeModal (click)="hideModal">
              <i class="ti-close"></i>
            </a>
          </li>
        </ul>
        <h4 class="modal-title text-center">Replace Video</h4>
      </div>
      <div class="modal-body">
        <div class="package_summary text-center">
          <p>Please upload a MP4 file you want to replace with the existing one. This will replace <strong>{{videosToBeReplaced?.video?.title}}</strong>
          </p>
          <p-fileUpload mode='advanced' #replaceFile name="replace1[]" [url]="getReplaceUrl(videosToBeReplaced?.video?.itemId)"
            accept="video/mp4" maxFileSize="100000000" 
            (onBeforeSend)="onBeforeSend($event)" 
            (onProgress)="onProgressReplace($event)"
            (onSelect)="onFileSelect($event)" 
            (onUpload)="onReplaceVideo($event)" 
            chooseLabel="Select Video">
          </p-fileUpload>
        </div>

      </div>
    </div>
  </div>
</div>

4.Используйте modal-component внутри цикла for 

<div *ngFor="let c of uiVideos;let i= index" class="row curriculum-single">
   <modal-component [id]="i" ></modal-component>
</div>

примечание: modal-component имеет идентификатор входа.Это сгенерирует динамический идентификатор для режима и кнопки.

5. Наконец, ваш метод будет выглядеть так - 

OpenUploaderAndBindContent(c: UIVideo, index:number) {
    console.log('before c: ' + c.video.itemId + ' - ' + c.video.title);

    this.videosToBeReplaced = new UIVideo();
    this.videosToBeReplaced = c;

    console.log(this.videosToBeReplaced.video.itemId + ' - ' + this.videosToBeReplaced.video.title);
    document.getElementById('videoReplaceTrigger'+index).click(); <-- ID IS GENERATED BY INDEX
  }

Здесь идентификатор генерируется динамически.

...