получить дочерний элемент в угловой 2

Question

Пожалуйста, смотрите ниже код.

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

@Component ({ 
selector : 'other-component', 
template : ` 
      <h2>OtherComponent<h2> 
      <table #tab id="tab"> 
      <tr *ngFor="let val of valArray"> 
       <td>{{val}}</td> 
       <input type="checkbox" [value]="val"> 
      </tr> 
      </table> 
     <button (click)="getChecked()">click me</button>` 
}) 
export class OtherComponent{ 
    valArray = ['one','two','three','four']; 
    @ViewChild ('tab') elem; 
    getChecked =() => { 

    console.log (this.elem.nativeElement.children[0].children) 
    } 

} 

В конце строки таблицы есть флажок, который был присвоен значение строки (объект JSON) теперь я хочу, чтобы собрать все проверенные коробки в угловом 2.

В простом JavaScript я могу сделать это легко, как показано ниже

var yy = document.getElementById('tab').getElementsByTagName('input'); 

Я получил то, что я искал по this.elem.nativeElement.children[0].children

это дало мне массив тр Элементы, из которых я получил проверочные коробки ввода

Есть ли лучший способ сделать это в угловом 2?

Answer 1

Изменить HTML (добавить #cbx к input) как:

<tr *ngFor="let val of valArray"><input #cbx type="checkbox" [value]="val"></tr>  

Тогда в классе компонента:

@ViewChildren('cbx') checkboxes; 
getChecked =() => { 
    console.log(this.checkboxes.toArray().map(x => x.nativeElement)); 
} 

Он распечатывает массив нужных флажков

Смотрите также живут Plunker Example

Update

Альтернативный способ использует DOM API напрямую:

@ViewChild ('tab') elem; 
getChecked =() => { 
    console.log(this.elem.nativeElement.getElementsByTagName('input')); 
    console.log(this.elem.nativeElement.querySelectorAll('input')); 
}