javascript — угловой сервисный вызов API вызывает ошибку карты переключений

Угловой сервисный вызов API вызывает ошибку switchmap

Я использую Angular с Restful C # API на серверной части. Я работаю над созданием простой корзины для покупок и борюсь с этим весь день. Когда я вызываю метод добавления в корзину на моей странице, логика сначала проверяет, есть ли товар в корзине. Если это так, он увеличивает счетчик и возвращает продукт, чтобы состояние могло обновляться. Если товара нет в корзине, он добавляет товар в корзину и возвращает объект товара для обновления состояния.

Ошибка первоначального вызова и все портит — если вы можете помочь мне выяснить, что происходит, я был бы бесконечно благодарен!

Методы C #

  [HttpGet("GetItem/{cartId}/item/{prodId}")] public async Task{amp}lt;ProductViewModel{amp}gt; GetItem(string cartId, int prodId) { var prod = await _shopCartSvc.GetItem(cartId, prodId); return prod; } [HttpGet("CreateItem/{cartId}/item/{prodId}")] public async Task{amp}lt;ProductViewModel{amp}gt; CreateItem(string cartId, int prodId) { var prod = await _shopCartSvc.CreateItem(cartId, prodId); return prod; // I stop it here to check my return values } 

В угловых формах у меня есть следующая логика в компоненте карты продукта

  addToCart() { console.log('addToCart'); this.cartSvc.addToCart(this.product) .subscribe((p : Product) ={amp}gt; { this.product = p; console.log('addToCart.done',p); }); } 

Это вызывает сервис корзины 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) ={amp}gt; { 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) ={amp}gt; { console.log('createItem-done', response); return response }), catchError(this.handleError)); } private updateItem(product: Product, amt: number = 1): Observable{amp}lt;Product{amp}gt; { let cartId = this.getOrCreateCartId(); return this.getItem(cartId, product.id) .switchMap(item ={amp}gt; { if (item == null) { console.log('addItem'); // Create new item in cart this.createItem(cartId, product.id) .subscribe(item ={amp}gt; { console.log('addItem.done',item); return of(item); }); } else { let total = item['quantity']   amt; if (total {amp}gt; 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 ={amp}gt; { 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 } 

При первоначальном добавлении товара в корзину происходит то, что он выдает ошибку, НО товар все еще добавляется. Следуя сообщениям журнала, я получаю

 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, …} 

Я новичок в Angular, и я не могу понять, в чем проблема. Я могу войти в свой 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) 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector