如何在angular 7中为一个列表添加多个过滤器并分别取消选中它们？

Question

我在Angular 7和3中使用ngFor按钮填充了一个复选框列表，以过滤复选框列表。我目前只能过滤一次。我想做的是添加多个过滤器，比如如果我单击“完成”按钮，我也应该被允许单击“活动”和任何其他按钮，列表应该只过滤这些按钮。最后，我应该被允许在点击时撤销过滤器。提前非常感谢。我的代码如下：

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

}

我的网页文件

<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)">
                        &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>

Answer 1

如果您想应用多个过滤器，我会让每个切换更新自己的过滤器状态。然后您可以将多个过滤器应用于数组并返回结果。您的过滤方法如下所示：

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

那么每个按钮可以切换这些过滤器，并且“全部”按钮可以将它们设置为假。

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

我做了一些快速的改变，应该让你更接近你正在寻找的行为：

史达克布利茨