#html #angular #typescript #angular-material
#HTML #угловатый #машинописный текст #угловой материал
Вопрос:
У меня есть список флажков, заполненный с помощью кнопок 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>
Комментарии:
1. Пожалуйста, подробно опишите, что такое фильтр. Например, если щелкнул активный фильтр, и теперь вы нажимаете на завершенный фильтр, который вы хотите отфильтровать из списка активных значений фильтра? Правильно ли я понимаю ?
2. В приведенном выше коде у меня есть 3 кнопки, по щелчку которых я получаю отфильтрованный список, но я хочу, чтобы при нажатии на любую кнопку, например, я нажимал на Active, а затем Completed, у меня должен быть список с активной и завершенной фильтрацией, и если я снова нажму на кнопку, это должно отменить список.фильтр, применяемый к этой кнопке. Короче говоря, это должно работать как флажки.
3. Надеюсь, я смог объяснить лучше
4. Вот ссылка на stackblitz: stackblitz.com/edit/angular-ivy-s468tm?file=src/app /…
Ответ №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;
}
Затем каждая кнопка может переключать эти фильтры, а кнопка «Все» может установить для них значение 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>
Я внес несколько быстрых изменений, которые должны приблизить вас к тому поведению, которое вы ищете:
Комментарии:
1. Обновлен @robbieAreBest Stackblitz для охвата всех ваших сценариев
2. да, это близко к этому, но то, что я ищу, это когда у меня есть json: { id: «C001», label: «Photography», IsChecked: false, completed: false, mri: true, colonoscopy: true} и у меня есть такие кнопки, как mri, colonoscopy и когда я нажимаюна МРТ и колоноскопии я хочу, чтобы отображались все флажки, в которых есть mri, colonoscopy, для которых в json установлено значение true. Например, если у меня есть 5 флажков, для которых МРТ истинно, и 4 флажка, для которых колоноскопия истинна, так что окончательным будет 9 в списке
3. Ваши данные для этого не подходят. Поскольку в настоящее время базовая фильтрация выполняется на основе todo.completed. Вам лучше применить фильтрацию на основе меток в ваших данных