草庐IT

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

codeneng 2023-03-28 原文

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

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

  • setTimeout 应该工作。你能用你如何使用 setTimeout 来更新这个问题吗？
  • 我终于改变了调用 setTimeout 的方式并且它起作用了，但是我必须等待 1000 毫秒才能更新视图，这并不是很顺利。
  • 我认为您不必等待一秒钟，将 1000 替换为 0 并检查是否有效。
  • 这确实有效，谢谢您的帮助！
  • 看到这个接受的答案，你就会明白使用 setTimeout 的原因。
  • 好的，我现在明白了，谢谢！

不要使用 *ngIf

1
2
  <video ....>
  </video>

  • 您不应该在组件中使用 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
}

  • 您好，谢谢您的帮助，我刚刚听说不建议在组件中使用 id，而是使用 @viewChild 注释更好，但我认为您的解决方案无法使用此注释对吗？
  • 是的，您可以在我的方法中使用 @ViewChild 注释。不是通过 getElementById 获取 parentElement，而是通过 templateReference 变量获取它。
  • 我已经更新了使用 ViewChild 的答案。如果您觉得我的回答有用，请您给我点赞。谢谢，我很乐意提供帮助。

何在javascriptspanclasssectionangularhtmltypescript

有关关于 javascript：如何在更改事件完成之前更新 DOM？的更多相关文章

  1. ruby - 如何在 Ruby 中顺序创建 PI - 2

    出于纯粹的兴趣，我很好奇如何按顺序创建PI，而不是在过程结果之后生成数字，而是让数字在过程本身生成时显示。如果是这种情况，那么数字可以自行产生，我可以对以前看到的数字实现垃圾收集，从而创建一个无限系列。结果只是在Pi系列之后每秒生成一个数字。这是我通过互联网筛选的结果:这是流行的计算机友好算法，类机器算法:defarccot(x,unity)xpow=unity/xn=1sign=1sum=0loopdoterm=xpow/nbreakifterm==0sum+=sign*(xpow/n)xpow/=x*xn+=2sign=-signendsumenddefcalc_pi(digits

  2. ruby-on-rails - Ruby on Rails 迁移，将表更改为 MyISAM - 2

    如何正确创建Rails迁移，以便将表更改为MySQL中的MyISAM？目前是InnoDB。运行原始执行语句会更改表，但它不会更新db/schema.rb，因此当在测试环境中重新创建表时，它会返回到InnoDB并且我的全文搜索失败。我如何着手更改/添加迁移，以便将现有表修改为MyISAM并更新schema.rb，以便我的数据库和相应的测试数据库得到相应更新？ 最佳答案 我没有找到执行此操作的好方法。您可以像有人建议的那样更改您的schema.rb，然后运行:rakedb:schema:load，但是，这将覆盖您的数据。我的做法是(假设

  3. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

  4. ruby - 如何在 buildr 项目中使用 Ruby 代码？ - 2

    如何在buildr项目中使用Ruby？我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序，我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/)，但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻，因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby​​

  5. ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby​​ 中生成它们？ - 2

    我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%

  6. ruby-on-rails - 如何在 ruby​​ 中使用两个参数异步运行 exe？ - 2

    exe应该在我打开页面时运行。异步进程需要运行。有什么方法可以在ruby​​中使用两个参数异步运行exe吗？我已经尝试过ruby​​命令-system()、exec()但它正在等待过程完成。我需要用参数启动exe，无需等待进程完成是否有任何ruby​​gems会支持我的问题？ 最佳答案 您可以使用Process.spawn和Process.wait2:pid=Process.spawn'your.exe','--option'#Later...pid,status=Process.wait2pid您的程序将作为解释器的子进程执行。除

  7. ruby - 如何在续集中重新加载表模式？ - 2

    鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende

  8. ruby - 如何在 Ruby 中拆分参数字符串 Bash 样式？ - 2

    我正在为一个项目制作一个简单的shell，我希望像在Bash中一样解析参数字符串。foobar"helloworld"fooz应该变成:["foo","bar","helloworld","fooz"]等等。到目前为止，我一直在使用CSV::parse_line，将列分隔符设置为""和.compact输出。问题是我现在必须选择是要支持单引号还是双引号。CSV不支持超过一个分隔符。Python有一个名为shlex的模块:>>>shlex.split("Test'helloworld'foo")['Test','helloworld','foo']>>>shlex.split('Test"

  9. ruby-on-rails - 项目升级后 Pow 不会更改 ruby​​ 版本 - 2

    我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby​​版本(从1.9.3到2.0.0，我使用RVM)当我切换ruby​​版本、安装所有gem依赖项时，我通过运行railss并访问localhost:3000确保该应用程序正常运行以前，我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后，由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0，此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘

  10. ruby - 如何在 Lion 上安装 Xcode 4.6，需要用 RVM 升级 ruby - 2

    我实际上是在尝试使用RVM在我的OSX10.7.5上更新ruby，并在输入以下命令后:rvminstallruby我得到了以下回复:Searchingforbinaryrubies,thismighttakesometime.Checkingrequirementsforosx.Installingrequirementsforosx.Updatingsystem.......Errorrunning'requirements_osx_brew_update_systemruby-2.0.0-p247',pleaseread/Users/username/.rvm/log/138121

随机推荐