Как извлечь данные из предмета поведения в сервисе Angular?

Question

Целью использования BehaviouSubject было использование одного вызова API и передача одних и тех же данных нескольким компонентам по одному и тому же маршруту.Я могу это сделать.Я не могу отфильтровать полученные данные

Вот скрипка стека, созданная мной

https://stackblitz.com/edit/angular-xtne5y

В одном компоненте я отображаю таблицу вдругой, мне нужно извлечь некоторую информацию из него на основе значений отдельных ключей объекта.Например, сколько задач завершено / неполно.Поскольку я обязан использовать асинхронный канал везде в шаблоне, выполнение таких операций, как фильтр, невозможно.Есть ли лучший способ реализовать это?

Мне нужно, чтобы данные извлекались как пригодные для повторного использования

Answer 1

В настоящее время вы используете async трубу.Чтобы получить желаемый результат, вы можете использовать (или связать) другой пользовательский канал с вашими данными для извлечения определенных свойств.

Я разветвил ваш пример stackblitz и изменил код с помощью решения. Вот мое рабочее решение .

По сути, все, что вам нужно сделать, это использовать пользовательский канал.

{{ todos$ | async | myCustomFilter }}

В моем примере (stackblitz) я делаю:

    <p>
      No. of Completed Todos: {{ (todos$ | async | filterByCondition: {property: 'completed', value: true}).length }}
    </p>

    <p>
      No. of Incomplete Todos: {{ (todos$ | async | filterByCondition: {property: 'completed', value: false}).length }}
    </p>

Правка после ваших комментариев

Существует два подхода к желаемому результату: 1) Используйте пользовательский канал.Вы можете параметризовать канал так же, как я, или даже создавать свои собственные условия и оценивать, передавая параметр в свой канал (как я делал в примере для свойства args).

Т.е.

    <div>{{$todos | async | filterTodo: 'byDate'}}</div>

Теперь вы можете поместить обработчик в свой фильтр pipeTodo для этого значения byDate.

2) Использовать разные наблюдаемые для разных данных.

  class MyComponent {
    todos$;
    completedTodos$;
    constructor() {
        this.todos$ = this.someService.getTodos(); // from behavior subject
        this.completedTodos$ = this.todos$.pipe(
            filter((item) => {
                // your filter code here
            })
        )
    }

  }

Answer 2

Итак, я работал над проектами, в которых при создании раздела TODO мой подход был бы, когда вы подписываетесь на URL для получения данных, создаете Redux Store (Вот [ссылка] https://medium.com/supercharges-mobile-product-guide/angular-redux-the-lesson-weve-learned-for-you-93bc94391958), с интерфейсом типа

interface ProductTodos {
    product: {title:string,iscompleted:boolean,id:string/number},
    todos?: any[]
}

Когда вы выбираете свой Todos, вы отправляете действие типа "PUSH", и каждый TODO будет объектом типа product и добавляется к массиву todos в интерфейсе.

при создании экземпляра избыточного хранилища в классе компонентов вы перебираете массив «todos» и проверяете идентификатор и флаг isCompleted.

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

Вот ссылка на мой ReduxDemo в Angular 4, посмотрите его https://github.com/nerdySingh/ReduxDemoAngular