Angular 2 +如何使用同一选择器（elementRef.nativeElement）选择和循环多个元素

Question

在我的组件中，我试图取消选择具有相同类名的所有复选框。

querySelector每次（或一次）仅选择第一个...，querySelectorAll并且不选择任何内容。

这就是功能。我知道这样使用jQuery是错误的，但这说明了我的目标。

unsetAllOptions(){
    var self = this;
    var i = 0;
    $("input.option_input").each(function(){
        i++;
        var element = self.elRef.nativeElement.querySelector("input.option_input")[i];
        if(element.checked){
            // console.log(i)
            console.log('unchecking:',i);
            element.checked=false;
            element.dispatchEvent(new Event('change'));
            element = "";
        }
    });
}

Answer 1

为了达到预期的效果，请使用以下选项

选项1：

由于使用的是。每个方法，使用索引和值可以避开querySelectorAll，参考- http://api.jquery.com/jquery.each/

$("input.option_input").each(function(index,element){
        if(element.checked){
            element.checked=false;
            element.dispatchEvent(new Event('change'));
            element = "";
        }
    });

代码示例-https: //codepen.io/nagasai/pen/aGoMKz?editors=1010

选项2

Option2和首选方法是避免document.querySelectorAll，因为它会获取DOM的所有匹配元素，而与当前组件无关

取得预期成果的步骤，

1. 使用Renderer和ElementRef来获取当前的组件元素
2. 使用this.elem.nativeElement.querySelectorAll来获取匹配的元素

component.ts

import { Component, Renderer, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 5';
  constructor(private renderer: Renderer, private elem: ElementRef){}

  unsetAllOptions(){
    let elements = this.elem.nativeElement.querySelectorAll('.option_input');
    elements.forEach(element => {
     if(element.checked){
        element.checked = false
     }
});
 }
}

component.html

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>

<input type="checkbox" class="option_input" checked>
<input type="checkbox" class="option_input" checked>
<input type="checkbox" class="option_input" checked>
<input type="checkbox" class="option_input" checked>
<input type="checkbox" class="option_input">

<button (click)="unsetAllOptions()">UncheckAll</button>

代码示例-https: //stackblitz.com/edit/angular-aei58i?file=app/app.component.html