/ / pobierz element potomny w kanciastym 2 - kątowym, maszynopis

uzyskać element potomny w kanciastym 2 - kątowy, maszynopis

Proszę spojrzeć na poniższy kod.

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

}

Na końcu wiersza tabeli znajduje się pole wyboru, któremu przypisano wartość wiersza (obiekt JSON), teraz chcę zebrać wszystkie zaznaczone pola w kancie 2.

W prostym javascript mogę to zrobić tak jak poniżej

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

Dostałem to, czego szukałem this.elem.nativeElement.children[0].children

to dało mi zestaw tr elementy, z których otrzymałem zaznaczone pola wejściowe

Czy jest jakiś lepszy sposób na zrobienie tego w kanciastym 2?

Odpowiedzi:

8 dla odpowiedzi № 1

Zmień html (dodaj #cbx do input) lubić:

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

Następnie w klasie komponentów:

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

Wyświetli tablicę żądanych pól wyboru

Zobacz także na żywo Przykład Plunkera

Aktualizacja

Alternatywnym sposobem jest bezpośrednie użycie DOM API:

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