Question

我有一个从ngFor循环和重置按钮生成的复选框列表。单击重置按钮时，如果选中任何复选框，我想取消选中它们。

这是我的HTML

<li *ngFor="let item of listItems" class="filter-list__item">
    <label class="filter-list__itemLabel">
        <input type="checkbox" value="{{item.id}}" [checked]="checked" />
        <span innerHTML="{{item.name}}"></span>
    </label>
</li>
<button (click)="resetAll()"></button>

Answer 1

您可能希望将checked属性绑定到项目状态，如下所示。

graph = { "a" : ["c"],
          "b" : ["c", "e"],
          "c" : ["a", "b", "d", "e", "h"],
          "d" : ["c"],
          "e" : ["b", "c"],
          "f" : ["g", "h"]
          "g" : ["f", "h"]
          "h" : ["c", "f", "g"]
        }

现在，您可以在组件中创建resetAll函数以访问列表项并将值重置为false

<li *ngFor="let item of listItems" class="filter-list__item">
    <label class="filter-list__itemLabel">
        <input type="checkbox" value="{{item.id}}" [checked]="item.checked" />
        <span innerHTML="{{item.name}}"></span>
    </label>
</li>

<button (click)="resetAll()"></button>

Answer 2

我的解决方案如下，它就像一个魅力：

假设您正在使用模态对话。最好的方法是订阅onClose-Observable。然后，您只需使用自身的克隆覆盖基础列表。 Angular现在被强制重新绘制整个列表，它会自动删除所有刻度。

ngAfterViewInit() {

    this.modal.onClose.subscribe(() => {
        if (this.objectList) {
            this.objectList = JSON.parse(JSON.stringify(this.objectList));
        }
    });

}

如果您没有使用模态对话，只需实现一个方法来触发覆盖过程。

Answer 3

Select All Checkbox & deslect All Checkbox 
Here this.categoryData is a array where all  category_id with nested are present 

// Deselect all catgory

resetAll() {
    this.accountCategories = [];

}

    selectAll() {
        let CategoryDataArray = [];
        this.categoryData.forEach(element => {
            if (element.sub_categories.length > 0) {
                element.sub_categories.forEach(subcategory => {
                    CategoryDataArray.push(subcategory.category_id)
                });
            }
            CategoryDataArray.push(element.category_id)

        });
        this.accountCategories = CategoryDataArray;
        var catArray = []
        if (this.accountCategories) {
            this.categoryArray.push(this.accountCategories)

            var categories = {};

            this.categoryArray[0].forEach(element => {
                if (!categories[element]) {
                    categories[element] = [];
                }
                categories[element] = { 'status': 'active' };
            });
            catArray.push(categories);
            return this.categoryResult = catArray
        }
    }

取消选中所有选中的复选框Angular2

3 个答案: