Javascript 对API的角度服务调用导致switchmap错误

Javascript 对API的角度服务调用导致switchmap错误,javascript,angular,api,http,runtime-error,Javascript,Angular,Api,Http,Runtime Error,我正在使用Angular,后端有一个Restful C#API。我正在努力创建一个简单的购物车,整天都在努力解决这个问题。当我在页面中调用addtocart方法时,逻辑首先检查商品是否已经在购物车中。如果是,则递增计数并返回产品,以便状态可以更新。如果产品不在购物车中,它会将产品添加到购物车中,并返回产品对象以更新状态 最初的呼叫出错了,把一切都搞糟了——如果你能帮我弄清楚发生了什么,我将永远感激你 C#方法 这将调用cart服务addToCart公共方法 addToCart(produc

我正在使用Angular,后端有一个Restful C#API。我正在努力创建一个简单的购物车,整天都在努力解决这个问题。当我在页面中调用addtocart方法时,逻辑首先检查商品是否已经在购物车中。如果是,则递增计数并返回产品,以便状态可以更新。如果产品不在购物车中,它会将产品添加到购物车中,并返回产品对象以更新状态

最初的呼叫出错了,把一切都搞糟了——如果你能帮我弄清楚发生了什么,我将永远感激你

C#方法

这将调用cart服务addToCart公共方法

   addToCart(product: Product) {
      console.log('cs.addToCart');
      return this.updateItem(product);
   }
这反过来调用私有updateItem方法来执行所有处理

   private getItem(cartId: string, productId: number) {
      console.log('getItem-productId', productId);
      return this.http.get(this.getBaseUrl() + 'GetItem/'+ cartId +'/item/' + productId)
         .pipe(
            map((response: Product) => {
               console.log('getItem-done', response);
               return response
            }),
            catchError(this.handleError));
      }

   private createItem(cartId: string, productId: number) {
      console.log('createItem');
      return this.http.get(this.getBaseUrl() + 'CreateItem/'+ cartId + '/item/' + productId)
         .pipe(
            map((response: Product) => {
               console.log('createItem-done', response);
               return response
            }),
            catchError(this.handleError));
   }

   private updateItem(product: Product,  amt: number = 1): Observable<Product> {

      let cartId = this.getOrCreateCartId();
      return this.getItem(cartId, product.id)
         .switchMap(item => {
            if (item == null) {
               console.log('addItem');
               // Create new item in cart
               this.createItem(cartId, product.id)
                  .subscribe(item => {
                     console.log('addItem.done',item);
                     return of(item);
                  });
            } else {
               let total = item['quantity'] + amt;
               if (total > 0) {
                  // Update qty of existing item in cart
                  item['quantity'] = total;
                  console.log('Cart Id',cartId,', UpdateItemQty to', total);

                  this.http.post(this.getBaseUrl() + 'UpdateItem/'+ cartId, item)
                     .take(1).switchMap( item => {
                        console.log('UpdateItem.done - newQty', item['quantity']);
                        return of(item);
                  });
               } else {
                  // Qty 0 so remove
                  console.log('DELETE');
                  this.http.get(this.getBaseUrl() + 'RemoveItem/'+ cartId + '/item/' + item['id']);
                  return of (product);
               } // end if
            } // end if
         }); // getItem - switchMap

   }
我是个新手,我一辈子都搞不清楚问题是什么。我可以进入我的C#后端,在return语句中停止它,查看返回的值。它是正确的类型和正确的值。错误发生在我在后端时,当我继续流时,它将完成,但由于错误,我的对象状态不会更新。我得到的全部错误是:

console.js:35 Global - Unhandled Error:  TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
    at subscribeTo (subscribeTo.js:41)
    at subscribeToResult (subscribeToResult.js:11)
    at SwitchMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/switchMap.js.SwitchMapSubscriber._innerSub (switchMap.js:51)
    at SwitchMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/switchMap.js.SwitchMapSubscriber._next (switchMap.js:41)
    at SwitchMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:77)
    at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:41)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:41)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterSubscriber._next (filter.js:38)
    at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber.notifyNext (mergeMap.js:84)
    at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/InnerSubscriber.js.InnerSubscriber._next (InnerSubscriber.js:15)
    at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at XMLHttpRequest.onLoad (http.js:1534)
    at XMLHttpRequest.wrapped (raven.js:376)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:14051)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:498)
    at invokeTask (zone.js:1744)
    at XMLHttpRequest.globalZoneAwareCallback (zone.js:1781)
在这里:

创建该项是因为您有一个API调用和一个订阅,但没有返回语句。订阅中包含的内容并不重要。如果您想返回一个流并执行一些副作用,您应该

            if (item == null) {
               console.log('addItem');

               // Create new item in cart
               return this.createItem(cartId, product.id)
                  .pipe(tap(item => {
                     console.log('addItem.done',item);
                  }))
            } 

非常感谢。成功了!我是新来的,我已经和这个问题斗争了两天了!非常感谢。
console.js:35 cs.addToCart
console.js:35 getItem-productId 1
console.js:35 getItem-done null
console.js:35 addItem
console.js:35 createItem
console.js:35 Global - Unhandled Error:  TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
....
console.js:35 createItem-done {name: "Beagle", description: "", imageUrl: "Beagle.png", defaultTextColor: "Black", isPremiumProduct: false, …}
console.js:35 addItem.done {name: "Beagle", description: "", imageUrl: "Beagle.png", defaultTextColor: "Black", isPremiumProduct: false, …}
console.js:35 Global - Unhandled Error:  TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
    at subscribeTo (subscribeTo.js:41)
    at subscribeToResult (subscribeToResult.js:11)
    at SwitchMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/switchMap.js.SwitchMapSubscriber._innerSub (switchMap.js:51)
    at SwitchMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/switchMap.js.SwitchMapSubscriber._next (switchMap.js:41)
    at SwitchMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:77)
    at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:41)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:41)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterSubscriber._next (filter.js:38)
    at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber.notifyNext (mergeMap.js:84)
    at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/InnerSubscriber.js.InnerSubscriber._next (InnerSubscriber.js:15)
    at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at XMLHttpRequest.onLoad (http.js:1534)
    at XMLHttpRequest.wrapped (raven.js:376)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:14051)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:498)
    at invokeTask (zone.js:1744)
    at XMLHttpRequest.globalZoneAwareCallback (zone.js:1781)
            if (item == null) {
               console.log('addItem');
               // Create new item in cart
               this.createItem(cartId, product.id)
                  .subscribe(item => {
                     console.log('addItem.done',item);
                     return of(item);
                  });
            } 
            if (item == null) {
               console.log('addItem');

               // Create new item in cart
               return this.createItem(cartId, product.id)
                  .pipe(tap(item => {
                     console.log('addItem.done',item);
                  }))
            }