关于 javascript:如何在更改事件完成之前更新 DOM?

How to update the DOM before change event is done?

我创建了一个文件输入来打开视频。我想在 my_variable 存在的条件下显示该视频输入。这是 HTML 的样子:

1
2
3
4
<input type="file" (change)="handleFileInput($event)" accept="video/mp4">

  <video id="video" width="200" height="200" src="{{ my_variable.path }}">
  </video>

只要用户选择视频,就会调用 (change) 事件。我的函数 handleFileInput 应该像这样更新 my_variable:

1
2
3
4
5
handleFileInput(event: any) {
    this.my_variable = event.target.files.item(0);
    this.video = document.getElementById(‘video’) as HTMLInputElement;
    // do other stuff that requires this.video variable
}

我的问题是 this.video 变量是 null。实际上,由于 change 事件尚未完成,DOM 中的 ng if 条件不会更新视图,因此我的视频输入永远不会创建。因此 this.video 在这一点上是 null 的事实。但我不知道如何解决这个问题。

我没有在 Stack Overflow 上找到任何东西,我尝试在执行 document.getElementById(‘video’) 时设置超时。例如:

1
2
3
4
setTimeout(() => {
    this.video = document.getElementById(‘video’) as HTMLInputElement;
    // do other stuff that requires this.video variable
      }, 1000);

它确实有效,但我希望我能找到更清晰的解决方案。
请你帮助我好吗 ?
谢谢


不要使用 *ngIf

1
2
  <video ….>
  </video>


在 HTML DOM 中拥有 video 标签并使用 ngIf 用变量切换它,您正在做的是创建一个循环依赖项,因为 this.video 为空,因为它正在等待更改事件处理程序完成它的工作。您需要做的是动态添加视频标签

1
<input type="file" (change)="handleFileInput($event)" accept="video/mp4">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@ViewChild(‘videoTagContainer’) public videoTagContainer: ElementRef;

handleFileInput(event: any) {
    this.my_variable = event.target.files.item(0);
    let parentElement = this.videoTagContainer.nativeElement;

    if(parentElement.firstChild)
        parentElement.removeChild(parentElement.firstChild);

    let videoElement = document.createElement(‘video’) as HTMLInputElement;
    videoElement.id = ‘video’;
    videoElement.width = ‘200px’;
    videoElement.height = ‘200px’;
    videoElement.src = this.my_variable.path;

    parentElement.appendChild(videElement);
    // do other stuff that requires this.video variable
}


原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/269166.html

(0)
上一篇 2022年6月20日
下一篇 2022年6月20日

相关推荐

发表回复

登录后才能评论