Блог

У меня есть список флажков, сгенерированных из цикла 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>
  

Вероятно, вы хотите привязать атрибут checked к состоянию элемента следующим образом.

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

Теперь вы можете создать функцию ResetAll в своем компоненте для доступа к элементам списка и сброса значений в false

 resetAll() {
  this.listItems.forEach((item) => {
    item.checked = false;
  })
  

Мое решение заключается в следующем, и оно работает как шарм:

Допустим, вы используете модальный диалог. Лучший способ — подписаться на его OnClose-Observable. Затем вы просто перезаписываете базовый список его клоном. Теперь Angular вынужден перерисовывать весь список и автоматически удаляет все галочки.

 ngAfterViewInit() {

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

}
  

В случае, если вы не используете модальный диалог, просто реализуйте метод для запуска процесса перезаписи.

 Select All Checkbox amp; 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
        }
    }