Angular 角度引导模式值设置不一致

更新2

问题 您的问题与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

以相同的

按钮和
模式
为目标

您应该为每个视频创建多模态，因此创建新的

模态组件

比如

模态组件

在其中移动以下模态内容

使用

@Input

使

按钮和
模型的设置成为动态的



注意：模态组件具有输入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
  }

OpenUploaderAndBindContent（c:UIVideo，索引：number）{
console.log（'c:'+c.video.itemId+'-'+c.video.title之前）；
this.videostobereplace=new UIVideo（）；
这个.videostobereplace=c；
log（this.videostobereplace.video.itemId+'-'+this.videostobereplace.video.title）；
document.getElementById（'videoReplaceTrigger'+索引）。单击（）；
document.getElementById（'videoReplaceTrigger'+索引）。单击（）这是buttonid对吗？这是如何生成的？是的，每当你调用
OpenUploaderAndBindContent
，你也应该传递
索引。
但是这会生成唯一的按钮吗？或者我也必须在UI Id中添加索引？或者这里的概念是什么？按钮Id有什么不同？因为我已经更新了m请检查我做错了什么。由于我的模态是子组件，如果我想触发，我必须从父控件访问子控件，对吗？或者有其他方法吗？
  <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>

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

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
  }