I'm currently stuck on a problem with angular. I try to filter an object array using checkbox but it doesn't work. I would try to filter my array by status.
I already try to use "ng-true-value" when i check the checkbox but it seems it doesn't work because of my object array.
export class MockDataService {
House: Array<object> = [];
constructor() {}
getHouse() {
let options = {min:100, max:500}
const types = ["Maison","Appartement","Bureau","Batiment publique"];
const status = ["En cours","Prêt à publier","Déjà publié","Informations manquantes"];
// const status = [1,2,3,4,5];
for (let i = 0; i < 1; i++) {
const randomTypes = Math.floor(Math.random()*types.length);
const randomStatus = Math.floor(Math.random()*status.length);
this.House.push({
id: faker.random.uuid(),
owner: faker.company.companyName(),
username: faker.internet.userName(),
street: faker.address.streetAddress(),
city: faker.address.city(),
garden: faker.random.number(),
img: faker.image.city(),
surface: faker.random.number(options),
title: faker.lorem.word(),
type: types[randomTypes],
projectStatus: status[randomStatus],
date: faker.date.recent(10)
});
}
return of(this.House);
}
<input type="checkbox" name="checkbox" [(ngModel)]="checkboxStatus" ng-true-value="'En cours'" ng-false-value="''">
<tr *ngFor="let information of House | filter:searchText | filter:checkboxStatus">
I would like to have 3 checkboxes and when I check a checkbox, the object array displayed as a list should filter by this checkbox.
Thanks for your help !
You can do that in the following way :
something.component.html
<input type="checkbox" id="ckb" (change)="onCheck($event,'En cours')" name="En_cours" value="En cours">
<tr *ngFor="let information of House | search: searchText | filter: filterKey">
something.component.ts
filterKey: string = '';
searchKeyWord: string = '';
onCheck(event,$value){
if ( event.target.checked ) {
this.filterKey= $value;
}
else
{
this.filterKey= '';
}
}
search.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'search'
})
export class SearchPipe implements PipeTransform {
transform(items: any, term: any): any {
if (term === undefined) return items;
return items.filter(function(item) {
for(let property in item){
if (item[property] === null){
continue;
}
if(item[property].toString().toLowerCase().includes(term.toString().toLowerCase())){
return true;
}
}
return false;
});
}
}
filter.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(items: any[], filterText: string): any[] {
if(!items) return [];
if(!filterText) return items;
filterText = filterText.toLowerCase();
return items.filter( it => {
return it['projectStatus'].toString().toLowerCase().includes(filterText);
});
}
}
something.component.html
<input type="checkbox" id="ckb" (change)="onCheck($event,'En cours')" name="En_cours" value="En cours">
<tr *ngFor="let information of House | search: searchText | filter: filterKeys">
something.component.ts
filterKeys = [];
searchKeyWord: string = '';
onCheck(event,$value){
if ( event.target.checked ) {
this.filterKeys.push($value);
}
else
{
this.filterKeys.splice(this.filterKeys.indexOf($value), 1);
}
}
filter.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(array: any[], query:string[]):any[] {
if (typeof array === 'object') {
var resultArray = [];
if (query.length === 0) {
resultArray = array;
}
else {
resultArray = (array.filter(function (a) {
return ~this.indexOf(a.projectStatus);
}, query));
}
return resultArray;
}
else {
return null;
}
}
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加