mercredi 5 juin 2019

How to filter an object array using checkbox with angular?

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.


mockdata.service.ts :

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

project-list.component.html :

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




Aucun commentaire:

Enregistrer un commentaire