如何将在组件变量中所做的更改反映到Angular 2中的视图中?
问题描述:
我有(n)复选框和我的angular2视图中的按钮。当我点击其中一个函数时会被调用。当我点击按钮时,每个复选框都必须取消选中。怎么做?? (n)可能会动态变化。如何将在组件变量中所做的更改反映到Angular 2中的视图中?
答
我会给你一个例子从一个表,因为我不知道你的代码实际上的样子,但它应该对你所需要的工作。
您需要为您的所有复选框定义一些对象。他们可能都有一些共同的特性,如标签。这里有一个这样的对象的示例:
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;
}
}
}
这是不是你可以插入到你的代码,但它应该给你如何完成你以后的一些想法。
请将代码添加到您的问题中,以演示您尝试完成的内容,尝试的内容以及失败的位置。 –
有很多代码,不可能在这里发布。请参考图片。在点击category1时,所有复选框都必须取消选中 –
给出一些已实施的代码。 – asmmahmud