कृपया नीचे कोड देखें।
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 में सभी चेक किए गए बॉक्स एकत्र करना चाहता हूं।
सादे जावास्क्रिप्ट में मैं इसे आसानी से नीचे कर सकता हूं
var yy = document.getElementById("tab").getElementsByTagName("input");
मुझे वह मिला जो मैं खोज रहा था this.elem.nativeElement.children[0].children
इसने मुझे सरणी दी टीआर जिन तत्वों से मैंने इनपुट बॉक्स चेक किए हैं
क्या कोणीय 2 में ऐसा करने का कोई बेहतर तरीका है?
उत्तर:
जवाब के लिए 8 № 1एचटीएमएल बदलें (जोड़ें #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));
}
यह वांछित चेकबॉक्स की सरणी मुद्रित करेगा
लाइव भी देखें प्लंकर उदाहरण
अद्यतन करें
वैकल्पिक तरीका डोम एपीआई का उपयोग सीधे कर रहा है:
@ViewChild ("tab") elem;
getChecked = () => {
console.log(this.elem.nativeElement.getElementsByTagName("input"));
console.log(this.elem.nativeElement.querySelectorAll("input"));
}