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

标签 angular

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

}

参见 plunker

最佳答案

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

Array.from(this.myDiv.nativeElement.children).filter(tag => tag.tagName === 'P')

关于angular - 如何在@ViewChild Angular2 中查找子元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38149322/

相关文章:

javascript - 为什么 Angular 构建创建的文件包含 'es5' 和 'es2015' 而不是 'es6'(或根本没有后缀)?

angular - 在 Angular 2 中使用逗号作为列表分隔符

javascript - 从 Angular 2 组件调用纯 javascript 函数

angular - MD Paginator 错误 : data. 切片不是 MapSubscriber 上的函数

javascript - 运行 Protractor 测试时出现 TypeScript 错误

javascript - Angular 是如何读取插值的?

Angular 2 用户界面路由器 : change data in parent state

Angular HttpClient post 请求类型

angular - titlecase 管道不适用于三元运算符 angular2

javascript - 从 GITHUB API 获取数据