Как использовать setFilter на EntityCollectionService - PullRequest
Новая
       8

Как использовать setFilter на EntityCollectionService

0 голосов
/ 25 сентября 2019

Я хотел бы знать, как работает метод setFilter для EntityCollectionService в @ ngrx / data.Документация указывает на то, как она используется, но нет примера, показывающего фактическую используемую функцию setFilter (pattern: any).Поскольку аргумент может быть любого типа, я не могу сделать вывод, что здесь нужно сделать.

По сути, у меня есть список объектов в хранилище данных с использованием модуля @ ngrx / data.Я хотел бы определить фильтр, чтобы я мог подписаться на FilterEntities $ observable EntityCollectionService.Я могу успешно подписаться на сущности $ observable и получить полный нефильтрованный список.Раньше я выполнял фильтрацию вне EntityCollectionService, но я хотел бы использовать встроенный механизм фильтрации. 


export class MyComponent implements OnInit {
  filteredProjects$: Observable<Project[]>;
  typeFilterOptions: FilterOption[];
  stageFilterOptions: FilterOption[];

  constructor(private projectService: ProjectEntityService, ptivate metadataService: MetadataService) {}

  ngOnInit() {
    this.typeFilterOptions = this.metadataService.getProjectTypes();
    this.stageFilterOptions = this.metadataService.getProjectStages();

    this.filteredProjects$ = this.projectService.filteredEntities$;
  }

  onFilterChange() {
    typeFilter = typeFilterOptions.filter(option => option.isChecked).map(option.name);
    stageFilter = stageFilterOptions.filter(option => option.isChecked).map(option.name);

    this.projectService.setFilter(project => {
      return (typeFilter.indexOf(project.type) >= 0) &&
             (stageFilter.indexOf(project.stage) >= 0); 
    }
  }
}

Приведенный выше код - мой лучший подход при попытке установить фильтр правильно.Очевидно, что это не работает, как я ожидал.При установке фильтра на функцию фильтра ничего не меняется, хотя я вижу, как срабатывает действие set filter, как и ожидалось.Объекты все еще не фильтруются в этой точке.Аргумент, помеченный как pattern: any, заставляет меня думать, что это должно быть что-то отличное от функции, но опять же я не могу вывести из документации то, что он ожидает.

1 Ответ

0 голосов
/ 26 сентября 2019

Хорошо, так что копаясь в исходном коде Мне удалось выяснить, как использовать фильтр в службе сущностей ngrx / data.

Часть, которую мне не хватало, определяла фильтрфункция в конфигурации метаданных Entity Service ( см. документы здесь ):

app.module.ts 


const entityMetadata: EntityMetadataMap = {
  Project: {
    //pattern can be any object you want it to be.  This is the same argument used in setFilter(pattern: any)
    filterFn: (entities: Project[], pattern: {types: string[], stages: string[]}) => {
      return entitites.filter(entity => {
       return (pattern.types.indexOf(entity.type) >= 0) &&
              (pattern.stages.indexOf(entity.stage) >= 0)
      });
    }
  }
};

@NgModule({
    ...
})
export class AppModule {

    constructor(private eds: EntityDefinitionService) {

    eds.registerMetadataMap(entityMetadata);
  }
}

, затем в компоненте всевам нужно создать объект фильтра и использовать его в качестве аргумента для setFilter в Entity Service:

my.component.ts 

export class MyComponent implements OnInit {
  filteredProjects$: Observable<Project[]>;
  typeFilterOptions: FilterOption[];
  stageFilterOptions: FilterOption[];

  constructor(private projectService: ProjectEntityService, private metadataService: MetadataService) {}

  ngOnInit() {
    this.typeFilterOptions = this.metadataService.getProjectTypes();
    this.stageFilterOptions = this.metadataService.getProjectStages();

    this.filteredProjects$ = this.projectService.filteredEntities$;
  }

  onFilterChange() {
    typeFilter = typeFilterOptions.filter(option => option.isChecked).map(option.name);
    stageFilter = stageFilterOptions.filter(option => option.isChecked).map(option.name);

    this.projectService.setFilter({
      types: typeFilter,
      stages: stageFilter
    });
  }
}

На этомУкажите, что что-либо в вашем шаблоне, подписанное на FilterProjects $ observable, получит обновление отфильтрованных объектов при вызове setFilter.Например:

my.component.html 

...
<app-project-list [projects]="filteredProjects$ | async"></app-project-list>
...
...