如何为列表添加多个过滤器并在 angular 7 中单独取消选中它们? [英] How to add Multiple filter for a list and uncheck them individually in angular 7?

问题描述

我在 Angular 7 和 3 按钮中使用 ngFor 填充了一个复选框列表来过滤复选框列表，目前我只能过滤一次.也可以单击活动"和任何其他按钮，并且列表应该只过滤那些.最后，我也应该被允许在点击时撤消过滤器.非常感谢.我的代码如下:

我的 ts 文件

import { Component, OnInit } from '@angular/core';@成分({选择器:'app-checkboxexample'，templateUrl: './checkboxexample.component.html',styleUrls: ['./checkboxexample.component.scss']})导出类 CheckboxexampleComponent 实现 OnInit {selectedItemsList = [];已检查 ID = [];过滤器:字符串；num1:任何；复选框数据列表 = [{id: 'C001',标签:'摄影',isChecked:假，完成:假},{id: 'C002',标签:'写作'，isChecked:假，完成:真实},{id: 'C003',标签:'绘画',isChecked:假，完成:假},{id: 'C004',标签:'针织',isChecked:假，完成:假},{id: 'C011',标签:'跳舞',isChecked:假，完成:真实},{id: 'C005',标签:'园艺',isChecked:假，完成:假},{id: 'C006',标签:'绘图'，isChecked:假，完成:真实},{id: 'C007',标签:'健身',isChecked:假，完成:真实},{id: 'C008',标签:'烹饪',isChecked:假，完成:真实},{id: 'C009',标签:'剪贴簿'，isChecked:假，完成:假},{id: 'C010',标签:'折纸'，isChecked:假，完成:假}]ngOnInit(): 无效 {if (sessionStorage.getItem('screening') != null) {this.selectedItemsList = JSON.parse(sessionStorage.getItem('screening'));this.checkboxesDataList = this.selectedItemsListthis.num1 = JSON.parse(sessionStorage.getItem('manual'))}this.filter = '全部';this.fetchSelectedItems()this.fetchCheckedIDs()}更改选择(){this.fetchSelectedItems()}fetchSelectedItems() {this.selectedItemsList = this.checkboxesDataList.filter((value, index) => {返回值.isChecked});}fetchCheckedIDs() {this.checkedIDs = []this.checkboxesDataList.forEach((value, index) => {如果(值.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;}});}提交(){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') {返回 this.checkboxesDataList;} else if (this.filter === 'editing') {返回 this.checkboxesDataList.filter(todo => !todo.completed);} else if (this.filter === '完成') {返回 this.checkboxesDataList.filter(todo => todo.completed);}返回 this.checkboxesDataList;}}

我的 html 文件

检查表
<div class="extra-container"><div class="card";样式=宽度: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>

<div class="row"><div class="col-md-4"><h4>兴趣爱好列表</h4><ul class="checkbox-items"><li *ngFor=let item of todosFiltered().slice(0,7)"><输入类型=复选框"名称="id=""[(ngModel)]=item.isChecked"(change)=changeSelection()">{{item.label}}<li *ngFor="let item of todosFiltered().slice(7,14)"><输入类型=复选框"名称="id=""[(ngModel)]=item.isChecked"(change)=changeSelection()">{{item.label}}

<div class="col-md-4"><h4>所选爱好的数量:{{selectedItemsList.length}}<输入类型=文本"id=手册"值={{num1}}><ul><li *ngFor="let item of selectedItemsList">{{item.label}}<div class="remove-item";(click)=deleteTodo(item.id)">&times;

<div class="col-md-4"><h4>对象</h4><代码>{{selectedItemsList |json}}<h4>ID数组</h4><code>{{checkedIDs}}</code>