Angular Bootstrap Modal值设置不一致

时间：2018-10-14 18:13:47

标签： angular typescript angular5 bootstrap-modal

更新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
  }

}

然后上载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>

旧代码：第一个问题

这是我的component.html

在代码的下部，有一个模式。

时设置模态值

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

单击此方法。如您所见，此处uiVideos绘制了一个列表。对于此列表的每个元素，都有一行，其中包含编辑，移动和多个操作。我在上面的代码中指定了操作。

问题： 从uiVideos绑定的第一行的内容显示在Modal中。但对于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 :(得分：1)

问题

您的问题与for循环的每次迭代在相同DOM元素上的操作有关。

请参阅您的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 

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

注意：模态组件具有输入ID。这将为模式和按钮生成动态ID。

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
  }
  

这是ID的动态生成。

相关问题
最新问题