Rx JS 6+ Тип 'Observable' должен иметь метод Symbol.iterator, который возвращает итератор - PullRequest
Новая
       2

Rx JS 6+ Тип 'Observable' должен иметь метод Symbol.iterator, который возвращает итератор

1 голос
/ 09 апреля 2020

Пытаясь получить отфильтрованный массив значений из наблюдаемой, я получил следующую ошибку:

Тип 'Observable' должен иметь метод Symbol.iterator, который возвращает итератор.

Код: 

export class ItemsService {

  orderItems: OrderItem[] = [];
  orderItemsUrl = 'http://localhost:5000/order-items/';

  getOrderItemsFromHttp(selectedOrderNumber): Observable<OrderItem[]> {
    const tempArr = [];
      const orderItems = of (this.http.get<OrderItem[]>(`${this.orderItemsUrl}`)
      .subscribe(res => {
            this.orderItems = res;
      }) );

    for (const orderItem of orderItems) {                        <--- Error here
        if (orderItem.orderNumber === selectedOrderNumber) {
          tempArr.push(orderItem);
        }
    }
    return of(tempArr);
  }  
}

Если я изменю следующее 

for (const orderItem of orderItems) {

на 

for (const orderItem of [orderItems]) {

, ошибка исчезнет, ​​но свойство orderNumber больше не распознается, и intellisens говорит:

Свойство 'orderNumber' не существует для типа 'Подписка'

Так как я могу это исправить, пожалуйста?

Ответы [ 2 ]

2 голосов
/ 09 апреля 2020

мне кажется, вы ищете это: 

  getOrderItemsFromHttp(selectedOrderNumber): Observable<OrderItem[]> {
    return this.http.get<OrderItem[]>(`${this.orderItemsUrl}`).pipe(
      map(orderItems => orderItems.filter(oi => oi.orderNuber === selectedOrderNumber))
    );
  }

, чтобы это работало, вам нужно импортировать оператор map: 

import { map } from 'rxjs/operators';
0 голосов
/ 09 апреля 2020

Я рекомендую разделить способ подключения и поиска данных бизнес-логики c, чтобы, например, переход с http на SignalR не означал изменения бизнес-логики c.

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

Вам не нужно перестраивать массив 

@Injectable ({
   providedIn: 'root'
})
export class RestService {
config: Config; // Your URLs
   getItems () {
     return this.http.get <OrderItem []> (this.config.itemURL, {note: 'response'});
   }
}

@Injectable ()
export class ItemsService {

  orderItems: OrderItem [];

constructor (private restService: RestService) {
}

getItems () {
   return new Observable ((observer) => {
    restService.getItems (). subscribe ((items) => {
      observer.next (items);
    });
  });
}

}
...