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

How to update the DOM before change event is done?

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

1
2
3
4

只要用户选择视频，就会调用 (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);

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

相关讨论

在 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
}