如何将在组件变量中所做的更改反映到Angular 2中的视图中？

Question

我有（n）复选框和我的angular2视图中的按钮。当我点击其中一个函数时会被调用。当我点击按钮时，每个复选框都必须取消选中。怎么做？？ （n）可能会动态变化。

enter image description here

Answer 1

我会给你一个例子从一个表，因为我不知道你的代码实际上的样子，但它应该对你所需要的工作。

您需要为您的所有复选框定义一些对象。他们可能都有一些共同的特性，如标签。这里有一个这样的对象的示例：

myData = { 
    content: [ 
     { 
      some_string: '', 
      some_number: 0, 
      type: '', 
      selected: false 
     } 
    ] 
}; 

有了这个目标，您可以创建复选框实例和推动每一个到一个数组，其将持有所有复选框对象。

使用上面定义的对象在您的html中创建您的复选框。在你的html中你的复选框调用一个函数。在下面的情况下调用checkToggle()函数。

<input id='{{row.id}}' class='bx--checkbox bx--checkbox--svg' 
type='checkbox' name='checkbox' (change)="checkToggle($event, 
row.id)" [checked]="row.selected"> 

checkToggle()被定义如下：

//select or deselect this check box 
checkToggle(event, nodeId) { 
    const id = this.findNode(nodeId); 
    this.myData.content[id].selected = !this.myData[id].selected; 
} 

您的按钮应该结束了调用一个函数来检查所有的箱子

<button (click)="checkToggleAll($event)">Your Button Title</button> 

最后，有你checkToggleAll()功能经过整个数组的复选框并设置它们。这里有一个例子：

//select or deselect all the check boxes 
checkToggleAll(event) { 
    for (let i = 0; i < this.myData.content.length; i++) { 
     if (this.controls[this.myData.content[i].type]) { 
      this.myData.content[i].selected = event.target.checked; 
     } 
    } 
} 

这是不是你可以插入到你的代码，但它应该给你如何完成你以后的一些想法。