Как мне отфильтровать угловую таблицу материалов с помощью ngrx?

Я использую angular 4 + angular material + ngrx с действиями / эффектами / редукторами. У меня есть массив данных о клиентах (имя, адрес, штат США).

В моем компоненте есть мат-таблица всех клиентов и раскрывающееся меню с 50 состояниями. Я использую асинхронный конвейер в своем компоненте HTML, и полный список клиентов отображается идеально.

Теперь, когда пользователь выбирает состояние, я хочу отфильтровать таблицу и отобразить только клиентов в этом состоянии, не возвращаясь на сервер, поскольку у меня уже есть все клиенты в магазине.

Какой шаблон проектирования лучше всего подходит для этого? Могу ли я отфильтровать таблицу в компоненте, не затрагивая магазин? Это вообще возможно?

Или мне нужно отправить действие и выполнить фильтр в редукторе? Если это лучший подход, я полагаю, мне придется хранить в магазине 2 массива: один, содержащий ВСЕХ клиентов, и один, который будет отфильтрованным массивом, который я бы привязал к компоненту. Это кажется более чистым и более соответствующим шаблону, но требует дублирования потенциально большого набора данных о клиентах.

Приветствуется некоторый образец кода (или ссылка) рекомендуемого подхода или аналогичного решения.

Спасибо


angular filter angular-material ngrx
person mikeLong100    schedule 03.04.2018    source источник
comment
не могли бы вы поделиться своим источником?   -  person Shohel    schedule 03.04.2018
comment
если вы используете таблицу материалов, нет необходимости поддерживать два массива, материал сделает это за вас. Вы можете просто предоставить фильтр для источника данных. Посмотри на мой ответ.   -  person Anshuman Jaiswal    schedule 03.04.2018
comment
см. это, фильтр stackoverflow.com/questions/48769015/   -  person Shohel    schedule 03.04.2018

Ответы (2)


arrow_upward
1
arrow_downward

При выборе раскрывающегося списка applyFilter функции в HTML определите applyFilter в component как:

applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
    this.dataSource.filter = filterValue;
}

в ngOnInit() добавьте предикат для настройки фильтра следующим образом:

ngOnInit() {
    this.getCustomers().subscribe(data => {
      this.dataSource = new MatTableDataSource(data);
    });

    this.dataSource.filterPredicate = function(data, filter): boolean {
      return data.state.toLowerCase() == filter;
    };
}

HTML

<mat-table [dataSource]="dataSource">

Вы также можете найти пример здесь.

person Anshuman Jaiswal    schedule 03.04.2018

arrow_upward
0
arrow_downward

Не рекомендуется хранить всех клиентов в магазине ngrx, особенно если такие данные, как клиенты, заказы, продукты и т. Д., Могут быстро расти, что может привести к загрузке огромных объемов данных в функцию.

Я предпочитаю использовать прямые http-сервисы в сеточном компоненте, особенно когда реализованы такие мысли, как фильтрация / сортировка / разбиение на страницы на стороне сервера (например, проще комбинировать Kendo Grid с OData напрямую с помощью http-сервисов, чем по магазину).

Если вам нужно обмениваться данными из сетки, ваш компонент может отправлять действия, такие как GridDataLoaded({ items: items}), а затем другие могут использовать дату с помощью селекторов.

person Mateusz Radny    schedule 28.03.2020