отримати дитячий елемент у кутовий 2 - кутовий, машинопис

Будь ласка, перегляньте нижче код.

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?

Відповіді:

8 для відповіді № 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

Оновити

Альтернативним способом є використання dom api безпосередньо:

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

---