关于 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);

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

相关讨论

您不应该在组件中使用 id。使用 id 的 ViewChild 注解实例
您好，感谢您的帮助，但在隐藏 div 时我的控制台中仍然出现错误，因为我使用 my_variable 作为视频的路径…(\\’src\\’ 属性)
不推荐在组件中使用 id 吗？
@marehihd – 隐藏 div 时会出现什么错误？
如果您在元素的组件中使用 id。您不能使用该组件超过一个。如果您有相同的 id 元素，那么一旦您将始终通过使用 document.getElementById(\\’foo\\’) A B 获得第一个元素，当第一个组件处于活动状态时，您永远无法在任何组件中获得第二个 div。使用 ViewChild angular.io/api/core/ViewChild

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

How to update the DOM before change event is done?

猜你喜欢