如何在 @ViewChild Angular2 中查找子元素?

2023-11-23

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <div #container>
        <p>para 1</p>
        <p>para 2</p>
        <button>button 1</button>
    </div>
  `
})
export class AppComponent {
  @ViewChild('container') myDiv;

  ngAfterViewInit(){
    //this console.log would print this [p, p, button]
    console.log(this.myDiv.nativeElement.children);
    //how can I access to only p nativeElement only? 
  } 

}

See plunker


您可以尝试以下方法来获取数组p要素:

Array.from(this.myDiv.nativeElement.children).filter(tag => tag.tagName === 'P')
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 @ViewChild Angular2 中查找子元素? 的相关文章

随机推荐

  • 为什么我的 Python 代码为列表中的所有元素提取相同的数据?

    My project consists of making a competitive watch table for hotel rates for an agency It is a painful action that I want
  • 如何查找给定列是否存在唯一键约束

    我正在编写一个 perl 脚本 我需要在其中运行更新查询 但我需要检查 update sql 命令是否不违反唯一键约束 所以如果我有一张桌子tb C1 C2 C3 我的更新查询如下 update tb set C1 b1 where C2
  • 如何在HTML中正确引用本地资源?

    事实证明 引用本地资源可能是一些人的摩擦点 我正在寻找本地资源引用的规范答案及其含义 拿这些例子来说 这些参考路径有什么区别呢 img src myfile png 没有前导斜杠 img src myfile png 带有前导斜杠 img
  • 为什么 n+++n 有效而 n++++n 无效?

    在Java中 表达式 n n 似乎评估相当于 n n 尽管事实上 n是一个有效的一元运算符 其优先级高于算术运算符 运算符在n n 因此编译器似乎假设该运算符不能是一元运算符并解析该表达式 然而 表达式 n n 无法编译 即使有一个有效的可
  • Facebook在iOS6.0中使用SLRequest上传照片无论如何失败

    这是我的 Objc 代码 ACAccountStore facebookaccount ACAccountStore alloc init ACAccountType facebookaccountType facebookaccount
  • 电子邮件附件

    我希望能够附加我生成的文件 即时 我不想将文件保存在我的服务器上 并通过电子邮件发送出去 我已完成所有文本 但不知道如何使用 sendmail 将文件附加到电子邮件 谢谢 See http railscasts com episodes 2
  • Android: onPause() 是否保证在 finish() 之后调用?

    在任何地方都找不到对此问题的可靠答案 我有一个方法 其中调用 finish 然后调用 onPause onPause 是否保证在调用 finish 后被调用 Android一般会调用onPause 如果你打电话finish 在您的 Acti
  • SSL:使用 Python3 的 CERTIFICATE_VERIFY_FAILED

    如果这是一个愚蠢的问题 我深表歉意 但我一直在尝试自学如何使用 BeautifulSoup 以便我可以创建一些项目 我按照此链接作为教程 https www youtube com watch v 5GzVNi0oTxQ 在遵循与他完全相同
  • Android 进程内存使用与电池消耗之间的相关性

    我终于找到了一种获取各个进程的 TotalPss 的方法 现在我关心的是 如何找到每个android进程的电池消耗 如果没有直接的方法找到它 每个进程的内存使用量和电池消耗之间是否有任何相关性 我可以为此研究任何研究论文吗 是的 内存使用量
  • VBScript 内存不足错误

    我有一个由第三方公司构建的经典 ASP CRM 目前 我可以访问源代码并能够进行所需的任何更改 一天中 通常是在用户长时间使用之后 我的大多数页面都会随机出现内存不足错误 应用程序的构建方式是所有页面和脚本都从 Global asp 文件中
  • 为什么服务器重置 TCP 后用户代理会重新提交请求?

    我们最近注意到一个问题 即某些用户代理会重复相同的 POST 请求 而用户实际上并没有实际触发它两次 经过进一步研究 我们注意到只有当请求通过负载均衡器并且服务器花了很长时间来处理请求时才会发生这种情况 数据包捕获会话最终显示负载均衡器在
  • 是否有针对受最大宽度或最大高度约束的 IMG 的 CSS 选择器?

    如果我定义以下 CSS 规则 img max width 200px max height 200px border 1px solid black 是否有一种纯 CSS 方法来检测那些在没有尺寸限制的情况下会更大的图像对象 语义上匹配的东
  • 是否可以使用结构化绑定来分配类成员?

    我想使用 C 17 结构化绑定为类成员变量赋值 如下所示 include
  • 使用 Python 从 HTML 文件中提取文本

    我想使用 Python 从 HTML 文件中提取文本 如果我从浏览器复制文本并将其粘贴到记事本中 我想要的输出基本上与我得到的输出相同 我想要比使用正则表达式更强大的东西 因为正则表达式可能会在格式不良的 HTML 上失败 我看到很多人推荐
  • 我们如何将 UISplitVIewController 推送到 UINavigationController

    是否可以将 SplitViewController 推送到导航控制器上 我收到此错误 Split View Controllers cannot be pushed to a Navigation Controller
  • 如何在 MySQL 数据库中存储 Emoji 字符

    我有一个配置了默认排序规则的 MySQL 数据库utf8mb4 general ci 当我尝试使用以下查询在文本中插入包含表情符号字符的行时 insert into tablename column1 column2 column3 col
  • Javascript 减少陷阱 - 跳过第一次迭代?

    为什么javascript的reduce实现在第一次迭代时会跳过执行 1 2 3 reduce acc val gt console log acc acc console log val val return acc val acc 1
  • Switch-Case:声明初始化和声明然后赋值

    在 switch case 语句中声明与初始化无效但是声明然后赋值被允许 如下面的代码片段所示 从编译器方面来看 这两种类型的初始化有什么区别 为什么第一种类型的初始化无效而第二种类型的初始化有效 switch val case 0 int
  • 通过类名删除元素

    我有下面的代码来查找具有类名的元素 Get the element by their class name var cur columns document getElementsByClassName column Now remove
  • 如何在 @ViewChild Angular2 中查找子元素?

    import Component ViewChild from angular core Component selector my app template div p para 1 p p para 2 p div