Angular API Call doesn't get called

Here is my code. I'm trying to display a list when a property is selected from a combobox. I'm getting the list from backend, but I get this error whenever I click the display button. Even though, the method is a GET method. What could be the problem?

TS:

filter() {
    this._stockService
      .getWarehouseTransferReport()
      .subscribe((response: any) => {
        this.dataSource = new MatTableDataSource(response);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
        this.dataSource.filterPredicate = (data, filter) =>
          this.filterPredicate(data, filter);
      });
  }


  filterPredicate(data: IWarehouseTransferItem, filter: string) {
    let searchText = data.Reference;
    if (data.Reference) {
      searchText += (data.Reference as any).toLocaleLowerCase("tr");
  }
    if (data.DeliveryNote) {
        searchText += (data.DeliveryNote as any).toLocaleLowerCase("tr");
    }
    if (data.StockIntegrationCode ) {
        searchText += (data.StockIntegrationCode  as any).toLocaleLowerCase("tr");
    }
    if (data.Product.ProductName) {
        searchText += (data.Product.ProductName as any).toLocaleLowerCase("tr");
    }

    return searchText.indexOf(filter) >= 0;
}

Service TS:

getWarehouseTransferReport(): Observable<IWarehouseTransferItem[]> {
    return this._http.get("Stock/GetWarehouseTransferReport");
}

Backend C#:

 /// <summary>
        /// TRANSFER REPORT
        /// </summary>
        /// <param name="producdId"></param>
        /// <returns></returns>
        [HttpGet]
        public List<DtoWarehouseTransferItem> GetWarehouseTransferReport(int producdId)
        {
            return WarehouseSpProvider.GetWarehouseTransferReport(producdId);
        }
    }