Angular訂閱和observable重復獲取數據

Question

我在使用訂閱和可觀察時遇到問題

這是我的代碼

這是我的 inventory.service.ts

getInventoryList = (page: string,pageSize,size) => {
    const userLocation = this.authService.getUserLocation();
    let queryParams = `?page=${page}&loc=${userLocation}&size=${size}&pageSize=${pageSize}`;
      this.http
      .get<{ success: boolean, message: string, inventoryList: any }>(BACKEND_URL_item + '/getInventoryList' + queryParams)
      .pipe(retry(3), catchError((data) => {
        return EMPTY;
      }),map((data) => {
        if (page === 'inventory') {
          return {
            extractedInventoryList: data.inventoryList.map((item: any) => {
              return {
                itemId: item._id,
                itemID: item.itemID,
                itemName: item.itemName,
                itemSellingPrice: item.itemSellingPrice,
                itemPurchasePrice: item.itemPurchasePrice,
                itemAveragePurchasePrice: item.itemAveragePurchasePrice,
                itemBaseUnit: item.itemBaseUnit,
                itemCategory: item.itemCategory,
                itemReorderPoint: item.itemReorderPoint,
                itemTotalQuantity: item.itemTotalQuantity,
                itemSumQuantity: item.itemSumQuantity,
                itemLocation: item.itemLocation,
                itemSubLocation: item.itemSubLocation
              };
            }),
            success: data.success,
            message: data.message
          };
        } else {
          return {
            extractedInventoryList: data.inventoryList.map((item: any) => {
              return {
                itemId: item._id,
                itemName: item.itemName,
                itemTotalQuantity: item.itemTotalQuantity,
                itemLocation: item.itemLocation,
                itemSubLocation: item.itemSubLocation
              };
            }),
            success: data.success,
            message: data.message
          };
        }
      }))
      .subscribe((transformedData) => {
          this.inventoryList = transformedData.extractedInventoryList;
          this.inventoryListObserver.next({
            inventoryList: [...this.inventoryList],
            success: transformedData.success,
            message: transformedData.message
          });

        }
      });

  }

  getInventoryListListener = () => {
    return this.inventoryListObserver.asObservable();
  }

這是我的 inventory.component.ts

getInventoryItem(pageSize,size) {

    for(let x=0;x<size;x= x+10){

          this.inventoryService.getInventoryList('inventory',pageSize,x);
          this.itemListSubscription = this.inventoryService
        .getInventoryListListener()
        .subscribe((responseData: { inventoryList: IItem[], success: boolean, message: string }) => {
          if (!responseData.success) {
            this.spinner.stop();

          } else {
            this.itemList = this.itemList.concat(responseData.inventoryList);
            this.spinner.stop();
            this.itemListBackup = this.itemList;
          }
           this.showToasts(responseData.message, responseData.success);
        });




    }

  }

我正在嘗試每 10 個項目獲取數據.. 我正在使用 mongodb 它返回正是我想要的但是當我通過 Angular 得到它時它會插入一些重復的 arrays

誰能解釋這是為什么？

Answer 1

首先將返回 http Observable

public getInventoryListo(page: string, pageSize: number, size: number): Observable<any> {
  const userLocation = this.authService.getUserLcation();
  const queryParams = `?page=${page}&loc=${userLocation}&size=${size}&pageSize=${pageSize}`;
  return this.http
    .get<{ success: boolean, message: string, inventoryList: any }>(BACKEND_URL_item + '/getInventoryList' + queryParams)
    .pipe(
      .map((data) => {
        if (page.toLowerCase() === 'inventory') {
          return {
            extractedInventoryList: data.inventoryList.map((item: any) => {
              return {
                itemId: item._id,
                itemID: item.itemID,
                itemName: item.itemName,
                itemSellingPrice: item.itemSellingPrice,
                itemPurchasePrice: item.itemPurchasePrice,
                itemAveragePurchasePrice: item.itemAveragePurchasePrice,
                itemBaseUnit: item.itemBaseUnit,
                itemCategory: item.itemCategory,
                itemReorderPoint: item.itemReorderPoint,
                itemTotalQuantity: item.itemTotalQuantity,
                itemSumQuantity: item.itemSumQuantity,
                itemLocation: item.itemLocation,
                itemSubLocation: item.itemSubLocation
              };
            }),
            success: data.success,
            message: data.message
          };
        } else {
          return {
            extractedInventoryList: data.inventoryList.map((item: any) => {
              return {
                itemId: item._id,
                itemName: item.itemName,
                itemTotalQuantity: item.itemTotalQuantity,
                itemLocation: item.itemLocation,
                itemSubLocation: item.itemSubLocation
              };
            }),
            success: data.success,
            message: data.message
          };
        }
      })
      retry(3), 
      catchError((data) => {
        return EMPTY;
      })
    );
}

然后只需將 1 個請求安裝到 x 次調用 api

getInventoryItem(pageSize: number, maxSize: number): void {
  this.itemList = [];

  for (let i = 0; i < maxSize;  i += 10) {
    this.inventoryService.getInventoryList('inventory', pageSize, x).subscribe((response: any) => {
      this.spinner.stop();
            this.showToasts(responseData.message, responseData.success);

      if (response.success) {
        for (let j of response.inventoryList) this.itemList.push(j);
        this.itemListBackup = this.itemList;
      }
    });
  }
}

此外，如果您使用ngFor在模板中顯示列表，則可以使用slice pipe 。

例如： *ngFor="let item of itemList | slice: 0: 10"這將顯示前 10 個條目。