Angular2：从输入查询列表获取值的最佳实践

因此，我创建了一个输入列表：

template: `        
        <div *ngFor="#item of m_checkboxes">
          <label class="pull-left">{{item.name}}</label>
          <Input #checkInputs type="checkbox" (change)="onChange($event.target.value)" [checked]="item.checked" value="{{item.value}}" class="pull-left" style="margin-right: 2px">
        </div>

谢谢

---

Sean

我认为与其检查DOM元素，不如检查数据--

item.checked的值，无论它们在组件中的什么位置。如果检查DOM的原因是更新数据值，那么双向数据绑定就是为了更新数据值。我相信简单地将
[checked]=“item.checked”
更改为
[（ngModel）]=“item.checked”
将使绑定具有双向性，因此Angular2将为您更新数据值。
我认为与其检查DOM元素，不如检查数据-
item.checked的值，无论这些组件位于何处。如果检查DOM的原因是更新数据值，那么双向数据绑定就是为了更新数据值。我相信简单地将
[checked]=“item.checked”
更改为
[（ngModel）]=“item.checked”
将使绑定成为双向的，因此Angular2将为您更新数据值。
我只是尝试远离双向绑定，因为我将为每个表记录创建10个复选框，可能有500条记录，所以这将是5000个双向绑定。。。还有其他建议吗？德克萨斯州Sean@born2net为什么要远离双向绑定？如果您定制的自制解决方案的性能比Angular团队专门为该目的设计的解决方案更好，我会非常惊讶，不管有多少绑定。好吧，我的想法是，通过我的onChange，我只做一个映射，我就完成了，但有了2种方式，它必须跟踪这些可能的5000多个mem位置。。。如果这是最好的方法，好吧……但我想知道除了2种方法之外，还有什么其他方法可以获取这些动态创建的输入的状态。。。tx，肖恩。@born2net您的“单一映射”不是一个快速或高性能的操作。它必须扫描5000个复选框中的每一个，并且每次更改其中的任何一个复选框时都会这样做。另一方面，使用双向数据绑定，当一个更改Angular 2时，直接引用就在手边，并更新该值，就是这样。双向绑定以恒定时间运行。您的映射将按照复选框的数量按时间比例运行。好吧，想想看，我的下划线数据结构是不可变的。js map，所以双向绑定不起作用，因为我不能直接绑定到该类型的对象，对吗？我只是试着远离双向绑定，因为我将为每个表记录创建10个复选框，并且可能有500个记录，所以将有5000个双向绑定。。。还有其他建议吗？德克萨斯州Sean@born2net为什么要远离双向绑定？如果您定制的自制解决方案的性能比Angular团队专门为该目的设计的解决方案更好，我会非常惊讶，不管有多少绑定。好吧，我的想法是，通过我的onChange，我只做一个映射，我就完成了，但有了2种方式，它必须跟踪这些可能的5000多个mem位置。。。如果这是最好的方法，好吧……但我想知道除了2种方法之外，还有什么其他方法可以获取这些动态创建的输入的状态。。。tx，肖恩。@born2net您的“单一映射”不是一个快速或高性能的操作。它必须扫描5000个复选框中的每一个，并且每次更改其中的任何一个复选框时都会这样做。另一方面，使用双向数据绑定，当一个更改Angular 2时，直接引用就在手边，并更新该值，就是这样。双向绑定以恒定时间运行。您的映射将按照复选框的数量按时间比例运行。好吧，想想看，我的下划线数据结构是不可变的。js map，所以双向绑定不起作用，因为我不能直接绑定到该类型的对象，对吗？
  @ViewChildren('checkInputs')
  inputs:QueryList<any>

 private onChange(value) {    
        this.inputs.map(v=>{
            console.log(v.nativeElement.checked); // grab value from native :-(
        });

    }