Question

获取子元素

2016-09-12

30114

angular typescript

请查看下面的代码。

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 对象），现在我想在 angular 2 中收集所有选中的复选框。

在纯 javascript 中，我可以轻松地执行以下操作

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

我通过 this.elem.nativeElement.children[0].children 得到了我想要的东西

这给了我 tr 元素的数组，从中我得到了选中的输入框

在 angular 2 中有没有更好的方法可以做到这一点？

Answer 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'));
}