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

问题描述:

我有(n)复选框和我的angular2视图中的按钮。当我点击其中一个函数时会被调用。当我点击按钮时,每个复选框都必须取消选中。怎么做?? (n)可能会动态变化。如何将在组件变量中所做的更改反映到Angular 2中的视图中?

enter image description here

+0

请将代码添加到您的问题中,以演示您尝试完成的内容,尝试的内容以及失败的位置。 –

+0

有很多代码,不可能在这里发布。请参考图片。在点击category1时,所有复选框都必须取消选中 –

+0

给出一些已实施的代码。 – asmmahmud

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

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

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; 
     } 
    } 
} 

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