如何使用类型脚本绑定复选框以重新计算Angular 6中的动态数据

Question

我想在复选框事件更改时操纵数据结果。我将动态数据填充到表中，并且应该在未包含选项时进行过滤。

是否可以使用rxjs过滤数据？实现数据绑定的最佳方法或方法是什么？我应该将一些代码移到我的服务中，以便两个组件可以共享数据吗？

Here's the code!

Answer 1

删除复选框的[值]，仅[[ngModel]]

  <input type="checkbox" class="form-check-input" 
        [attr.id]="filters.question + '_' + (i+1)" 
         [(ngModel)]="option.checked" />

那么，现在你的“选项”不能是一个字符串。是的，您的filters.rows是一个字符串数组。我们可以在Object数组中进行转换

   //when you make the _newArray.push, you must make some like
   _newArray.push({
              question : item.DQuestionName,
              text: item.DQuestionText,
              rows : item.DOptions.map((p)=>{
                         return {text:p,checked:false}
                     }),
              columns: ["responses","%","Rank","low","high","+/-"]
            });  

了解如何使用map转换对象数组中的数组item.DOptions

标签变得像

<label [attr.for]="filters.question + '_' + (i+1)">{{option.text}}
</label>

现在，如果你用.html写

        <pre> Lang:{{_filtersArray[0].rows|json}}</pre>
        <pre> X1:{{_filtersArray[1].rows|json}}</pre>
        <pre> X2:{{_filtersArray[2].rows|json}}</pre>

你可以看到已选中

修改代码后，我们可以使函数getter像

get response()
  {
    return this._finalArray.map((p)=>{
      return {question:p.question,rows:p.rows.filter(r=>r.checked).map(q=>q.fields)}
    })
  }

也就是说，对于this._finalArray的每个元素，我们创建一个对象。该对象有两个属性，“问题”（等于问题）和行。行是一个数组。首先过滤检查的响应，然后将此响应转换为仅获取属性“fields”

您可以将结果视为：

<pre> {{response|json}}</pre>