Angular13编译报错：Subscription类型缺少Object[]的length/pop等属性

报错本质是类型不匹配：RxJS的subscribe()方法返回值是Subscription类型（用来后续取消订阅的句柄），不是你请求拿到的对象数组。你把subscribe的返回值直接赋值给声明为数组类型的pageObjects变量，TypeScript检测到类型对不上就抛出了这个错误。
另外你自定义的模型类命名为Object，和JavaScript原生全局Object类型重名，很容易引发隐性的类型混淆，建议重命名避免冲突。

• 移除对subscribe()返回值的错误赋值，只需要在subscribe的成功回调函数内，把接口返回的响应值赋值给pageObjects即可。
• 将自定义的Object模型类重命名为PageObject，同步修改所有引用该类型的位置，避免和原生类型冲突。

object.ts（模型定义） #

export class PageObject {
    _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;
    }
}

startup.service.ts（服务层） #

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { PageObject } from './object';

@Injectable()
export class StartupService {
  constructor(private httpClient: HttpClient){}

  getPageConfig(requestUrl: string) {
    return {
      type: 'webproject',
      title: 'Yellow Pages & Classifieds',
      description: 'Yellow Pages & Classifieds'
    };
  }

  getPageObjects(pageNID: number): Observable<PageObject[]>{
    return this.httpClient.get<PageObject[]>('http://localhost:1040/objects/getallbypage/' + pageNID);
  }
}

app.component.ts（组件层） #

import { Component, OnInit } from '@angular/core';
import { SEOService } from './services/shared/seo.service';
import { StartupService } from './services/shared/startup.service';
import { PageObject } from './services/shared/object';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
  siteUrl: string;
  pageObjects: PageObject[];
  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);    

    // 移除错误的赋值操作，直接调用subscribe
    this.startupService.getPageObjects(1).subscribe(
      (response: PageObject[]) => {
        this.pageObjects = response;
      },
      (error) => {
        console.log(error);
      }
    );
  }
}

补充提示：如果组件销毁时HTTP请求还未完成，记得手动取消订阅，或者使用async管道自动管理订阅生命周期，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Naveed Naik