Angular 2 +如何使用相同的选择器选择和循环多个元素（elementRef.nativeElement） [英] Angular 2 + how to select and loop over multiple elements with the same selector (elementRef.nativeElement)

问题描述

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

In my component I am trying to unselect all checkboxes with the same class name.

querySelector 仅选择第一个（或一次）......和 querySelectorAll 没有选择任何东西。

querySelector selects only the first one each time (or once)... and querySelectorAll does not select anything.

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

this is the function. I know its wrong to use jQuery like that but it illustrates my goal.

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 = "";
        }
    });
}

推荐答案

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

To achieve expected result, use below option

选项1：

当您使用.each方法时，使用索引和值可以避免querySelectorAll，引用 - http://api.jquery.com/jquery.each /

As you are using .each method, using index and value you can avoid querySelectorAll, reference - 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

选项2和首选方法是避免使用document.querySelectorAll，因为它无论当前组件如何都会获取DOM的所有匹配元素

Option2 and preferred way is to avoid document.querySelectorAll ,as it fetches all matching elements of the DOM irrespective of the current component

达到预期结果的步骤，

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

这篇关于Angular 2 +如何使用相同的选择器选择和循环多个元素（elementRef.nativeElement）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！