Angular, как мне фильтровать данные из наблюдаемого с помощью канала rxjs

Я вызываю метод getWorkOrders() в моем служебном файле, который, в свою очередь, вызывает сервер для получения записей.

Вот мой сервис. Я использую новый HttpClient.

export class BackendServices {
  private BASE_URL ='http://localhost:3000/backend';
  constructor(private http: HttpClient) {}
  getWorkOrders(){
    return this.http.get(this.BASE_URL + '/getworkorders/');
 }
}

Файл Component.ts

private woSubject = new BehaviorSubject<IWorkOrders[]>([]);
    getWorkOrders() {
        this.bs.getWorkOrders()
          .subscribe((data: any) =>
            this.woSubject.next(data),
        );
      }

Из метода компонента getWorkOrders, как мне отфильтровать данные из всех записей, которые были получены с сервера. Я понимаю, что он использует операторы pipe и filter rxjs, но не уверен, как их собрать.

введите описание изображения здесь


angular rxjs6
person Sumchans    schedule 17.05.2018    source источник
comment
с фильтром пробовал?   -  person Sajeetharan    schedule 17.05.2018
comment
Я получаю волнистую, когда я пробую фильтр. Я импортировал фильтр таким образом, import {filter} from 'rxjs/operators'; Я отредактировал свой пост с фильтром, показывающим волнистость.   -  person Sumchans    schedule 17.05.2018
comment
Смотрите мой ответ - здесь вы фильтруете массив, а не наблюдаемый rxjs, поэтому вам нужно сделать const filterData = data.filter(data => data.crew === 'FFM')   -  person glendaviesnz    schedule 17.05.2018
comment
Кроме того, просто будьте осторожны в фильтре, чтобы убедиться, что вы используете сравнение == или ===, а не оператор присваивания =, как в вашем примере.   -  person glendaviesnz    schedule 17.05.2018

Ответы (1)


arrow_upward
11
arrow_downward

Если вы хотите отфильтровать заказы, поступающие с сервера, с помощью фильтра rxjs, вам нужно будет превратить массив заказов в наблюдаемые заказы, например.

export class BackendServices {
    private BASE_URL ='http://localhost:3000/backend';
    constructor(private http: HttpClient) {}

    getWorkOrders(){
        return this.http.get(this.BASE_URL + '/getworkorders/')
                   .pipe(map((data) => Observable.from(data));
    }
}

private woSubject = new BehaviorSubject<IWorkOrders[]>([]);
    getWorkOrders() {
        this.bs.getWorkOrders()
          .pipe(
              filter(data => data.timestamp > 123456786 ),
              toArray()
           )
          .subscribe((data: any) =>
               this.woSubject.next(data),
           );
        }

Альтернативой является просто фильтрация массива на карте с использованием стандартного фильтра массива, например.

export class BackendServices {
    private BASE_URL ='http://localhost:3000/backend';
    constructor(private http: HttpClient) {}

    getWorkOrders(){
        return this.http.get(this.BASE_URL + '/getworkorders/');
    }
}

private woSubject = new BehaviorSubject<IWorkOrders[]>([]);
    getWorkOrders() {
        this.bs.getWorkOrders()
          .pipe(map(data => data.filter(workorder => workrder.timestamp > 123456786) )
          .subscribe((data: any) =>
               this.woSubject.next(data),
           );
        }

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

person glendaviesnz    schedule 17.05.2018
comment
Забыли в первом примере, что если вы хотите, чтобы конечный результат по-прежнему был массивом, вам придется использовать оператор toArray после фильтра - добавили это в - person glendaviesnz; 17.05.2018
comment
Это было очень мило с вашей стороны, спасибо за подробное объяснение. Я снова отредактировал свою фотографию. Я импортировал операторы таким образом: import {filter, map} from 'rxjs/operators';. Не уверен, что все еще понимаю эту красную линию. Проверьте картинку - person Sumchans; 17.05.2018
comment
посмотрите, исправляет ли это .pipe(map((data: IWorkOrders[] ) =› data.filter(workorder =› workrder.crew === 'FFM')) ) - person glendaviesnz; 17.05.2018
comment
здесь вы используете параметр фильтра из array.prototype, который не имеет ничего общего с rxjs, поэтому вам не нужно его импортировать, но не было аннотации типа, поэтому для IDE не было указаний на то, что это был массив, поэтому я подозреваю, что послужила причиной волнистости - person glendaviesnz; 17.05.2018
comment
Это сработало для меня; Однако убедитесь, что вы используете правильную карту. Я изначально импортировал не тот. Вы хотите: импортировать {карту} из rxjs/operators; - person Nabsta; 11.01.2019