I have been trying to figure out this for long time without any success. Would appreciate some help ! I am using Angular Version 13, & trying to perform get request to get objects array from the database. I am getting the error: Type "Subscription" is missing the following properties from type 'Object[]': length, pop, push, concat, and 28 more.

app.components.ts

    import { Component, OnInit } from '@angular/core';
    import { SEOService } from './services/shared/seo.service';
    import { StartupService } from './services/shared/startup.service';
    import { Object } from './services/shared/object';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss']
    })
    
    export class AppComponent implements OnInit{
      siteUrl: string;
      pageObjects: Object[];
      pageConfig: any;
    
      constructor(private startupService: StartupService, private seoService: SEOService){
        this.siteUrl = '';
        this.pageObjects = [];
        this.pageConfig = {};
      };
    
      ngOnInit(){
        this.siteUrl = window.location.href;
        this.pageConfig = this.startupService.getPageConfig(this.siteUrl);    
        this.seoService.updateTitle(this.pageConfig.title);
        this.seoService.updateDescription(this.pageConfig.description);    

        this.pageObjects = this.startupService.getPageObjects(1).subscribe(
      (response: Object[]) => {
        this.pageObjects = response;
      },
      (error) => {
        console.log(error);
      }
    );
      };
    };

startup.service.ts

    import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    import { Observable } from 'rxjs';
    import { Object } from './object';
    
    @Injectable()
    
    export class StartupService {
      constructor(private httpClient: HttpClient){};
    
      getPageConfig(requestUrl: string): any[]{
        var pageConfig: any = {
          type: 'webproject',
          title: 'Yellow Pages & Classifieds',
          description: 'Yellow Pages & Classifieds'
        };
        return pageConfig;
      };
    
      getPageObjects(pageNID: number): Observable<Object[]>{
        return this.httpClient.get<Object[]>('http://localhost:1040/objects/getallbypage/'   pageNID);
      }
    };

object.ts

    export class Object {
        _id: string;
        nid: number;
        id: string;
        title: string;
        type: string;
        path: string;
        ofnid: number;
        of: string;
        loadpriority: number;
        isactive: boolean;
        pagenid: number;
        
        constructor(){
            this._id = '';
            this.nid = 0;
            this.id = '';
            this.title = '';
            this.type = '';
            this.path = '';
            this.ofnid = 0;
            this.of = '';
            this.loadpriority = 0;
            this.isactive = true;
            this.pagenid = 0;
        };
    };

CodePudding user response：

You are assigning the pageObjects property to the actual observable, and then reassigning the same property to the response of that observable.

You are interested in the results of the subscription, so just get rid of the part where you assign pageObjects to the observable.

this.startupService.getPageObjects(1).subscribe(
  (response: Object[]) => {
    this.pageObjects = response;
  },
  (error) => {
    console.log(error);
  }
);

CodePudding user response：

Just a silly mistake, you don't need this extra assignment here:

this.pageObjects = this.startupService.getPageObjects(1).subscribe(
...
)

Change to

this.startupService.getPageObjects(1).subscribe(
...
)

It's worth mentioning that the return value of Observable.subscribe() is of type Subscription. Holding on to it lets you unsubscribe, which is necessary for subscriptions that never stop emitting values. You don't need to worry about it when making simple HTTP requests using the HTTPClient service since they only emit one value and then clean themselves up.