RxJS 6+类型“可观察”必须具有返回迭代器的“ Symbol.iterator”方法

时间:2020-04-09 17:35:44

标签: angular typescript rxjs

尝试从可观察值中获取过滤后的值数组时,出现以下错误:

类型“可观察”必须具有“ Symbol.iterator” 返回迭代器的方法。

代码:

[root@e3b166a8b479 /]# python3.7 -m pip -V     
pip 20.0.2 from /usr/local/lib/python3.7/site-packages/pip (python 3.7)
[root@e3b166a8b479 /]# python3.6 -m pip -V
pip 20.0.2 from /usr/local/lib/python3.6/site-packages/pip (python 3.6)
[root@e3b166a8b479 /]# python3.8 -m pip -V
pip 20.0.2 from /usr/local/lib/python3.8/site-packages/pip (python 3.8)
[root@e3b166a8b479 /]# ls /usr/local/bin | grep pip
pip
pip3
pip3.6
pip3.7
pip3.8

如果我修改以下内容

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) {

错误消失了,但属性 orderNumber 不再存在,情报人员说:

“预订”类型上不存在属性“ orderNumber”

那么我该如何解决?

2 个答案:

答案 0 :(得分:2)

在我看来,您正在寻找这个东西:

  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';

答案 1 :(得分:0)

我建议分离连接和查找业务逻辑数据的方式,例如,从http更改为SignalR并不意味着更改业务逻辑。

创建另一个服务,该服务的任务仅是使用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);
    });
  });
}

}