Receiving data from a service in Angular 2 with rxjs subscribe throws an error: it is not a

I've recently started working with Angular and I'm encountering an issue when trying to pass the _newArray to my child component using a shared service.

Service

fetchData(): Observable < any > {
  return forkJoin(this.fetchQuestions(), this.retrieveData()).pipe(
    tap(data => {
      this.combineData(this._questionsArray, this._dataArray);
    })
  );
}

combineData(question, data): any[]{
  let _newArray: any[] = [];
  _newArray.push({
    test1: "test1",
    test2: "test2"
  });
  return _newArray
}

Component

export class DisplayComponent implements OnInit {

  _updatedArr: any[];

  constructor(private apiService: ApiService) { }

  ngOnInit(): void {
    this.apiService.fetchData()
      .subscribe(data => {
        this._updatedArr = data;
      });

  }
}

Answer №1

fetchData is currently providing a Subscription, it needs to provide an Observable instead. Consider the following approach:

fetchData(): Observable {

    return combineLatest(this.retrieveQuestions(), this.obtainData()).pipe(
      tap(data => {
          this.mergeData(this._questionList, this._dataList);
      })
    );
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular4 - Div with ngIf doesn't respond to click event

I'm attempting to add a click event to a specific div. Within this div, there is another div that is dynamically generated based on a Boolean condition that I receive as input. Unfortunately, in this case, the click event is only functioning when clic ...

Utilize the useState() hook to add an object and display its data in a React Native

Here is a function I am working with: const [dataLoc, setDataLoc] = useState({date: "No data received yet from sensor", coords: {}}); This is where I set the location: Geolocation.getCurrentPosition( location => { const date = d ...

A guide on resolving deprecated warnings for typographical errors

Every time I try to npm install I am bombarded with numerous errors. typings WARN deprecated 9/9/2016: "registry:dt/node#6.0.0+20160831021119" is deprecated (updated, replaced or removed) My experiences with typescript have been nothing but a series ...

The Angular Material date picker unpredictably updates when a date is manually changed and the tab key is pressed

My component involves the use of the Angular material date picker. However, I have encountered a strange issue with it. When I select a date using the calendar control, everything works fine. But if I manually change the date and then press the tab button, ...

Guide on accessing appsettings file in Angular 5's app.module

Greetings! As I dive into developing a web application with Angular 5, I am faced with the challenge of reading values from appsettings.json and utilizing them in app.module.ts. Inside my app.module.ts file, within the imports section, resides the followin ...

Kubernetes directs incoming traffic to the /api/* endpoint through nginx

In my Kubernetes cluster, I have nginx configured to route traffic to my Angular application. Everything is working as expected, but I want nginx to redirect traffic to my Express application running on port 3000 when accessing myipaddress/api/v1. Addition ...

What is the process for redirecting an API response to Next.js 13?

Previously, I successfully piped the response of another API call to a Next.js API response like this: export default async function (req, res) { // prevent same site/ obfuscate original API // some logic here fetch(req.body.url).then(r => ...

Utilizing a fixed array as the data source for a mat-table

I am currently working on implementing the Angular Material table into my project. I am encountering an issue when trying to define the [dataSource]="data", even though I am using code similar to the examples provided. My question may seem basic, but my t ...

Maintaining checked items in their original state while searching for another one in ion-searchbar can be achieved by properly handling

My goal is to maintain the checked items as checked when searching for another item in ion-searchbar. While I have managed to keep the checked items, the checkmark icon does not stay checked. What I aim for is to retain the checked state of all food items ...

Creating dynamic meta tags in Angular using server side rendering

I have developed an Angular application with Server-Side Rendering. Before deploying the final result to Azure SWA, I utilize the prerender command. One of the components in my application is a blog post component, and here is the code snippet: import { C ...

Guide to dynamically including a tooltip in an input box using Angular 2

I need to implement a feature where a Tooltip message is displayed when hovering over an input box. The content of the Tooltip message will depend on the response received from a service. If the service responds with 'true', the Tooltip message s ...

How to Modify a Module that was Imported in Typescript

Apologies for my inexperience in this language. I've been working on a custom Discord bot and encountered a problem. I implemented the feature to load commands dynamically from a folder, with each command as a module. However, when trying to create a ...

Adding an image to a React component in your project

I am currently working on an app that utilizes React and Typescript. To retrieve data, I am integrating a free API. My goal is to incorporate a default image for objects that lack images. Here is the project structure: https://i.stack.imgur.com/xfIYD.pn ...

Error message: Conflicting type declarations across multiple files

I am facing a challenge with my TypeScript 'snippets' project. It seems that multiple .ts files contain type names (like Foo) that are the same. //file-a.ts type Foo = { } //file-b.ts type Foo = { } When attempting to compile, I encounter ...

Any idea how to resolve this typescript typing issue: "The argument, either a string or number, cannot be assigned to the parameter of type 'SetStateAction<string>'"?

Just recently delving into TypeScript, I've encountered a persistent typing problem that has proven challenging to resolve despite numerous attempts. The error message causing me trouble reads as follows: Argument of type 'string | number' ...

Exploring the functionalities of React Native with react-hook-form and implementing them with TypeScript

I've been working on creating a custom Input component in react native using typescript for the react-hook-form library. type CustomInputProps = { name: any, control: any } const CustomInput: FC<CustomInputProps> = ({name, control, ...p ...

Tips for incorporating runtime configuration into an Angular module and effectively leveraging it

After setting up Apollo Angular, I encountered a challenge in src/app/graphql.module.ts src/app/graphql.module.ts import { NgModule } from '@angular/core'; import { APOLLO_OPTIONS } from 'apollo-angular'; import { ApolloClientOptions, I ...

React development: How to define functional components with props as an array but have them recognized as an object

While trying to render <MyComponent {...docs} />, I encountered the following error: TypeError: docs.map is not a function Here's how I am rendering <MyComponent /> from a parent component based on a class: import * as React from &apo ...

Unable to utilize class identifiers in TypeScript because of 'incompatible call signatures' restriction

Following the execution of relevant yarn add commands, the following lines were added to the packages.json: "@types/classnames": "^2.2.7", "classnames": "^2.2.6", Subsequently, I incorporated these lines into my typescript files: import * as classnames ...

"Retrieve the x-coordinate position of a box within a specific div using

https://i.sstatic.net/68yeF.jpg https://i.sstatic.net/ZCrxZ.jpg Is there a way for me to move the box within the gray area? <div id="timeline"> <div cdkDragBoundary="#timeline" ...