samedi 9 septembre 2017

Angular 4 - Custom search pipe doesn't updates the items

I'm creating a search option for a master/detail like site. There is a searchConfig named object, which have the details for search. For example, a property there looks like this:

searchConfig.checkboxes.accessibility.onWeekend = {
  description: 'Hétvégén is',
  value: true,
  dbName: 'weekend',
  nest: 'availability'
}

The html what generates the accessibility checkboxes looks like this:

<div class="col-md-3" *ngFor="let entry of searchConfig.checkboxes.accessibility | keys">
<label>
  <input type="checkbox" [(ngModel)]="searchConfig.checkboxes.accessibility[entry.key].value">
   - 
</label>

So one checkbox has the searchConfig.checkboxes.accessibility.onWeekend.value value and its ngModel updates the searchConfig.checkboxes.accessibility.onWeekend.value value. Its value default false, but if the say true, the checkbox generated checked.

The part of the app what generates the 'items' looks like this:

*ngFor="let advertiser of advertisers | searchfilter: searchConfig"

So the searchFilter pipe gets the searchConfig object.

And the searchFilter pipe looks like this:

export class SearchFilterPipe implements PipeTransform {
  transform(items: any[], filters: object): any[] {
    if (!items) return [];

    return items.filter((item) => {
      for (let key in filters.checkboxes.accessibility) {
        if (filters.checkboxes.accessibility[key].nest) {
          return filters.checkboxes.accessibility[key].value === 
item[filters.checkboxes.accessibility[key].nest[filters.checkboxes.accessibility[key].dbName];
        }
      }
    })
  }
}

The mock data has just onWeekend: true-s. If i set the searchConfig files onWeekend property value to true, i got all the items, if i set false, i got none of them. But if i switch from false to true or from true to false, nothing happens. Why it is not updating the view?

Aucun commentaire:

Enregistrer un commentaire