AngularJS 2如何访问TS文件中的DOM元素?

2024-07-03

我是 AngularJS 的新手。我正在尝试将旋转器作为所有图像的背景。有多个图像,所以我不能使用单个变量isLoadedts 文件内。

我在模板中使用它:

<img src="{{document.thumbUrl}}" class="spinner" (load)="loaded()" />

然后在函数中loaded()在 ts 文件中,如何访问触发事件的元素?我怎样才能删除课程spinner在触发事件的特定元素上?


<img src="{{document.thumbUrl}}" class="spinner" (load)="loaded($event)" />

在你的班级里

constructor(private renderer:Renderer){


}

loaded($event){

  console.log($event.target); // is the img
   this.renderer.setElementClass($event.target, '', false);
}

也许更聪明一点:

<img #image src="{{document.thumbUrl}}" [class.spinner]="!image.loaded" (load)="image.loaded='true'" />
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

AngularJS 2如何访问TS文件中的DOM元素? 的相关文章

  • ngClass 中的多个条件 - Angular 4

    如何对 ngClass 使用多个条件 例子 section 像这样的东西 我的 2 个菜单有相同的类 当其中一个菜单为真且 某事 为真时 我需要类 希望我解释得足够好 您正在尝试将数组分配给 ngClass 但数组元素的语法是错误的 因为您
  • 检查标记坐标是否在边界内

    我在用着leafletAngular 6 应用程序中的地图 我获取每个项目的位置信息为 lat xx lng xx 我还得到了边界对象 它描述了地图当前可见的区域 它随着拖动和缩放而变化 边界对象如下所示 northEast lat 76
  • 在 *ngFor 中创建局部变量

    是否可以在 ngFor 中创建局部变量 例如 div 您可以将 ng container 与 ngIf 结合使用来实现此目的 div class message list div div
  • Azure 和 NX,运行管道时出错:npm:另一个进程(ID 为 4224)当前正在运行 ngcc

    我正在尝试使用 Azure 运行管道 在构建时失败并出现以下错误 当我运行nx affected target build base origin master prod parallel本地命令 我也有Another process 消息
  • 离子选择:预选值在单击一次之前是不可见的

    我刚刚在 ionic 版本 6 中创建了一个 ion select 我的问题是 我在页面加载时已成功预选了一个值 但此预选值未显示在 UI 中 它只是在我单击选择之后出现 但在它没有出现之前 如图 2 所示 我在 ionViewWillEn
  • Angular 4 多重防护 - 执行序列

    我的应用程序中有 2 个守卫 AuthGuard 和 AccessGuard 顾名思义 AuthGuard 保护所有页面 并将会话对象存储在 GlobalService 中 而 AccessGuard 依赖于 AuthGuard 存储在 G
  • 我怎样才能制定一个结构指令来包装我的 DOM 的一部分?

    目前 我的 HTML 中有以下行 p this is my first line p 使用包装器指令 我想添加第二段并将其包装在 div 中 因此它看起来像这样 p this is my first line p 然后该指令将添加包装器和第
  • ngx-bootstrap typeahead http 请求返回对象 Object

    我正在尝试构建一个返回 JSON 的服务的预输入 但是我的代码返回 object Object 而不是值 我究竟做错了什么 这似乎与我的 typeaheadoption 未正确映射到结果有关 但我不确定为什么会发生这种情况 这来自 ngx
  • Angular Material 7 Datepicker:禁用多年视图

    我使用 angular material 7 0 0 rc 0 中的 MatDatepicker 并制作了一个复杂的过滤器 将时间选择器中的每个可见日期与包含大约 200 或 300 个值的数组中的每一天进行比较 每次我将日期选择器切换到多
  • 如何在 Angular2 中更新矩阵参数

    在 Angular2 中 有没有办法更新矩阵参数 但导航到相同的组件 基本上希望从如下所示的网址轻松转换 search term paris pageSize 24 currentPage 1 someFilter value 做同样的事情
  • 在 Angular 中创建可重用的按钮组件

    我正在尝试在 Angular 5 中创建一个组件 该组件将包含一个可重用的按钮模板 在我的应用程序按钮的不同部分将调用不同的函数 因此我希望能够告诉按钮的给定实例要调用什么函数 我知道我可以在需要的地方为按钮创建一个 HTML 标签 但我希
  • 在 Angular 中创建可重用的按钮组件

    我正在尝试在 Angular 5 中创建一个组件 该组件将包含一个可重用的按钮模板 在我的应用程序按钮的不同部分将调用不同的函数 因此我希望能够告诉按钮的给定实例要调用什么函数 我知道我可以在需要的地方为按钮创建一个 HTML 标签 但我希
  • 如何在 Typescript 类中创建 Angular 5 HttpClient 实例

    我正在编写一个包含 httpClient 的基类 它用于进行 REST api 调用 如果在构造函数中定义 则 httpClient 变量设置正确 但在私有变量中未定义 这是我的示例代码 Injectable export class My
  • 打字稿错误:类型“HTMLElement”上不存在属性“文件”

    我希望使用 IONIC 为我的应用程序创建上传功能 这是我的 HTML 代码
  • 将 Cdk Overlay 放置在 Angular/Elements Web 组件内

    我有一个更复杂的 Angular 应用程序 我想将其部署为 Angular elements Web 组件 该应用程序使用 mat dialog 并且 Web 组件也不会占用 100 的浏览器窗口大小 我的问题是 mat dialog 的
  • 找不到名称“HammerManager”

    我在用 角 2 0 0 rc 5 angular2 材料2 0 0 alpha 7 4 Angular CLI 1 0 0 beta 11 webpack 2 当我尝试编译时 它会抛出错误 找不到名称 HammerManager 请参阅随附
  • 向 Angular 应用程序添加多个 HTTP 拦截器

    如何向 Angular 4 应用程序添加多个独立的 HTTP 拦截器 我尝试通过扩展来添加它们providers具有多个拦截器的数组 但真正执行的只有最后一个 Interceptor1被忽略 NgModule declarations im
  • Angular 2 模态弹出错误“表达式在检查后已更改”

    演示应用程序的 Github 存储库 https github com eddy80310 formBug 我有一个非常简单的应用程序 其中包含应用程序组件 子组件 帐户 处理消息对话框组件 弹出模式 的警报服务 为了演示目的 我有两种相同
  • 如何在ionic 2中生成和显示QR码

    我找到了在 Angular 和 ionic 1 中生成条形码的文档 但我需要在 Ionic 2 项目中生成一个 尝试 JsBarcode 项目 有一个 Angular 1 的包装器 我使用了本期中的说明来让它在 Angular 2 上工作
  • 使用属性初始化 Angular 2 组件[重复]

    这个问题在这里已经有答案了 有没有办法将参数传递到 Angular 2 组件的根 我已经能够使用属于内部组件模板一部分的组件来执行此操作 但不能使用根组件来执行此操作

随机推荐

  • DataContractSerializer - 如何将 xml 输出到字符串(而不是文件)

    我有一个关于 datacontractserializer 的快速问题 也许这更像是一个流问题 我找到了一段将 xml 写入文件流的代码 我基本上不需要该文件 只需要字符串输出 public static string DataContra
  • 模型字段的外键?

    我想要一个foreign key我的模型与的关系username领域中的User表 存储user创建于django contrib auth forms UserCreationForm 这是我的模型的样子 class Blog model
  • 打开我的 Cloud Run 服务的 URL 时出现 403“错误:禁止”

    我构建了容器映像 然后使用 Cloud Console 部署到 Cloud Run 但是 当我打开服务的端点 URL 时 我得到一个403 Error Forbidden page 如果您在访问 Cloud Run 服务时收到 403 Er
  • MS Access 获取 ISO 标准周数

    令我惊讶的是 我在网上找不到任何现有的解决方案 但我只需要一个返回 ISO 标准周数的 SQL 函数 即第一周的开始始终是一年中的第一个星期一 所有 DatePart 函数选项都不会始终返回正确的结果 我曾想过选项 vbFirstFourD
  • 如何在 Matlab 中标记两个向量?

    我有一个 2 列矩阵 称为M 我使用 Matlab 将其可视化为两个向量plot命令 plot M 我有两个问题 我想在绘图上标记向量本身 我想在绘图上标记矩阵的每一行 即每个向量分量 我该如何去做这些事情呢 一个例子 M cumsum r
  • ld 链接器错误 - 架构 x86_64 的未定义符号

    我正在尝试链接一个单模块汇编语言程序yasm我收到以下错误ld Undefined symbols for architecture x86 64 start referenced from implicit entry start for
  • 在 Dev Box 上安装 SQL Server 2008 时要使用哪些服务帐户

    我正在我的开发计算机上安装 SQL Server 2008 在安装过程中 系统要求我为不同的服务分配帐户 如果这是一台简单的开发机 我应该使用什么帐户来提供未分配用户的服务 我可以使用我登录的帐户 我是这台机器上的唯一用户 吗 我应该使用
  • 流与缓冲区

    我是 C 语言新手 我目前正在阅读 K R 在那里 我对其中关于文本流的定义感到困惑 文本流是分成新行的字符序列 每行由 0 个或多个字符组成 后跟一个换行符 为了了解这个流 我认识了一个新术语 即缓冲区 我只知道 输入和输出设备之间的连续
  • 有没有人设法从谷歌登录(Flutter)获取id令牌

    我正在尝试将我的用户与我的后端服务器连接起来 我使用了 flutter 官方谷歌登录插件中的示例 https pub dartlang org packages google sign in https pub dartlang org p
  • 8 特定应用程序不可用的功能

    Hi I have an app which is also live For the next version I want to implement deep linking for this I have to enable Asso
  • 通过python ctypes调用带有char *参数的C函数差异python2和python3

    我正在将一个文件从 python2 转换为 python3 该文件使用以下命令调用 C 函数ctypes模块 下面的最小示例在 python2 中有效 但在 python3 3 11 中引发以下错误 OSError 异常 访问冲突写入 0x
  • 无法将 Azure Web App - NodeJS 连接到 Azure Mysql

    我正在为 Node js 应用程序使用 Azure 连接字符串 来自 Azure 门户 但仍然无法连接到 Azure Database for Mysql 服务器 var conn mysql createConnection 主机 您的主
  • 构建 Angular 进行生产,无需安装 devDependency

    我目前正在尝试创建一个 Docker 容器来构建我的生产 Angular 应用程序 我正在使用 npm 我只想安装依赖项 所以没有 devDependency 所以我想这样做 npm install only prod ng build p
  • 广告投放刷新率

    我的网站上有一个页面 人们可以在其中观看直播 我尝试每十分钟通过 OpenX 更新一次广告横幅 ad tag top left html ad tag top left html 这没有完成这项工作 我想知道是否有人以前做过这个或有任何建议
  • 有必要了解代码访问安全(CAS)吗?

    使用 C 进行桌面应用程序开发是否有必要了解代码访问安全性 CAS 这是一个相当广泛的问题 答案取决于很多因素 然而 两个最重要的因素是您的目标环境和部署方法 大多数消费者软件都是通过安装程序 MSI 进行安装的 并在目标计算机上获得完全信
  • 将图像添加到 UITextView

    在我的应用程序中我有一个UITextView文本视图下方有一个按钮 用于将照片插入到文本视图中UITextView编辑时 我的要求是用户能够编辑其中的文本 并在需要时插入图像 类似于 StackOverflow 应用程序自己的UITextV
  • ARRAffinitySameSite cookie 的用途是什么?

    我正在调用 Azure 应用程序服务应用程序并发现这两个 cookie 我明白了ARRAffinitycookie是为了确保请求总是发送回同一个后端实例 但是cookie是什么呢 ARRAffinitySameSite饼干为了什么 的目的A
  • 使用 devise 和 cucumber 测试登录

    我正在尝试使用 Cucumber 测试登录功能 我的文件 users steps rb 包含 Given I am a user named with an email and password do name email password
  • 放大特定路线谷歌地图

    我有一个随机纬度和经度点的列表 我正在它们之间绘制一条路线 我的问题是如何在我在下面的实用方法中制作的谷歌地图中绑定这条路线 public static void drawRouteIntoMap final List
  • AngularJS 2如何访问TS文件中的DOM元素?

    我是 AngularJS 的新手 我正在尝试将旋转器作为所有图像的背景 有多个图像 所以我不能使用单个变量isLoadedts 文件内 我在模板中使用它 img src document thumbUrl class spinner 然后在