Блог

У меня есть список флажков, заполненный с помощью кнопок ngFor в Angular 7 и 3 для фильтрации списка флажков, в настоящее время я могу фильтровать только один раз.Что я хочу сделать, так это добавить несколько фильтров, например, если я нажму кнопку complted, мне также должно быть разрешено нажимать Active и любую другую кнопку, и список должен фильтровать только те.Наконец, мне также должно быть разрешено отменять фильтры для его кликов.ЗАРАНЕЕ БОЛЬШОЕ СПАСИБО. Мой код приведен ниже:

Мой ts-файл

 import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-checkboxexample',
  templateUrl: './checkboxexample.component.html',
  styleUrls: ['./checkboxexample.component.scss']
})
export class CheckboxexampleComponent implements OnInit {

  selectedItemsList = [];
  checkedIDs = [];
  filter: string;
  num1: any;



  checkboxesDataList = [
    {
      id: 'C001',
      label: 'Photography',
      isChecked: false,
      completed: false
    },
    {
      id: 'C002',
      label: 'Writing',
      isChecked: false,
      completed: true
    },
    {
      id: 'C003',
      label: 'Painting',
      isChecked: false,
      completed: false
    },
    {
      id: 'C004',
      label: 'Knitting',
      isChecked: false,
      completed: false
    },
    {
      id: 'C011',
      label: 'Dancing',
      isChecked: false,
      completed: true
    },
    {
      id: 'C005',
      label: 'Gardening',
      isChecked: false,
      completed: false
    },
    {
      id: 'C006',
      label: 'Drawing',
      isChecked: false,
      completed: true
    },
    {
      id: 'C007',
      label: 'Gyming',
      isChecked: false,
      completed: true
    },
    {
      id: 'C008',
      label: 'Cooking',
      isChecked: false,
      completed: true
    },
    {
      id: 'C009',
      label: 'Scrapbooking',
      isChecked: false,
      completed: false
    },
    {
      id: 'C010',
      label: 'Origami',
      isChecked: false,
      completed: false
    }
  ]

  ngOnInit(): void {
    if (sessionStorage.getItem('screening') != null) {
      this.selectedItemsList = JSON.parse(sessionStorage.getItem('screening'));
      this.checkboxesDataList = this.selectedItemsList
      this.num1 = JSON.parse(sessionStorage.getItem('manual'))
    }
    this.filter = 'all';
    this.fetchSelectedItems()
    this.fetchCheckedIDs()

  }

  changeSelection() {
    this.fetchSelectedItems()

  }

  fetchSelectedItems() {
    this.selectedItemsList = this.checkboxesDataList.filter((value, index) => {

      return value.isChecked
    });
  }

  fetchCheckedIDs() {
    this.checkedIDs = []
    this.checkboxesDataList.forEach((value, index) => {
      if (value.isChecked) {
        this.checkedIDs.push(value.id);
      }
    });
  }
  deleteTodo(id: string): void {
    this.selectedItemsList = this.selectedItemsList.filter(item => item.id !== id);
    this.checkboxesDataList.forEach(element => {
      if (element.id == id.toString()) {
        element.isChecked = false;
      }
    });
  }
  onsubmit() {
    this.num1 = ((document.getElementById("manual") as HTMLInputElement).value);
    sessionStorage.setItem('manual', JSON.stringify(this.num1));
    sessionStorage.setItem('screening', JSON.stringify(this.checkboxesDataList))
  }
  todosFiltered() {
    if (this.filter === 'all') {
      return this.checkboxesDataList;
    } else if (this.filter === 'editing') {
      return this.checkboxesDataList.filter(todo => !todo.completed);
    } else if (this.filter === 'completed') {
      return this.checkboxesDataList.filter(todo => todo.completed);
    }

    return this.checkboxesDataList;
  }

}
 

Мой html-файл

 <h1>Checklist</h1>
<div class="extra-container">
    <div class="card" style="width: 18rem;padding-left: 2%;">
        <ul class="list-group list-group-flush">
            <li class="list-group-item"><button [ngClass]="{'active': filter === 'all'}"
                    (click)="filter='all'">All</button></li>
            <li class="list-group-item"><button [ngClass]="{'active': filter === 'editing'}"
                    (click)="filter='editing'">Active</button></li>
            <li class="list-group-item"><button [ngClass]="{'active': filter === 'completed'}"
                    (click)="filter='completed'">Completed</button></li>
        </ul>
    </div>

    <div class="row">

        <div class="col-md-4">
            <h4>List of Hobbies</h4>



            <ul class="checkbox-items">
                <li *ngFor="let item of todosFiltered().slice(0,7)">

                    <input type="checkbox" name="" id="" [(ngModel)]="item.isChecked"
                        (change)="changeSelection()">{{item.label}}

                </li>
                <li *ngFor="let item of todosFiltered().slice(7,14)">

                    <input type="checkbox" name="" id="" [(ngModel)]="item.isChecked"
                        (change)="changeSelection()">{{item.label}}

                </li>
            </ul>

        </div>

        <div class="col-md-4">
            <h4>No of Selected Hobbies: {{selectedItemsList.length}}
                <input type="text" id="manual" value={{num1}}> </h4>
            <ul>
                <li *ngFor="let item of selectedItemsList">{{item.label}}
                    <div class="remove-item" (click)="deleteTodo(item.id)">
                        amp;times;
                    </div>
                </li>

            </ul>

        </div>

        <div class="col-md-4">
            <h4>Object</h4>
            <code>
    {{selectedItemsList | json}} 
    </code>

            <h4>Array of IDs</h4>
            <code>{{checkedIDs}}</code>
        </div>

    </div>
    <button type="submit" (click)="onsubmit()">Submit</button>
 

Если вы хотите применить несколько фильтров, я бы заставил каждый переключатель обновлять свое собственное состояние фильтра. Затем вы можете применить несколько фильтров к своему массиву и вернуть результат. Ваш метод фильтрации будет выглядеть примерно так:

 todosFiltered() {
    let checkboxesToDisplay = this.checkboxesDataList;

    if (this.filterActive) {
      checkboxesToDisplay = checkboxesToDisplay.filter(todo => !todo.completed);
    }

    if (this.filterCompleted) {
      checkboxesToDisplay = checkboxesToDisplay.filter(todo => todo.completed);
    }

    return checkboxesToDisplay;
  }
 

Затем каждая кнопка может переключать эти фильтры, а кнопка «Все» может установить для них значение false.

 <li class="list-group-item"><button [ngClass]="{'active': filter === 'all'}"
                    (click)="filterActive=false;filterCompleted=false">All</button></li>
<li class="list-group-item"><button [ngClass]="{'active': filter === 'editing'}"
                    (click)="filterActive=!filterActive">Active</button></li>
<li class="list-group-item"><button [ngClass]="{'active': filter === 'completed'}"
                    (click)="filterCompleted=!filterCompleted">Completed</button></li>
 

Я внес несколько быстрых изменений, которые должны приблизить вас к тому поведению, которое вы ищете:

stackblitz