使用构造函数 'Subscriber' 从对象开始将循环结构转换为 JSON

Question

尝试订阅我的可观察对象时出现以下错误。我不太确定为什么，因为我没有在代码中使用任何类型的 Stringify（据我所知）。它只是从 api.

中获取一个 JSON 数组

 ERROR TypeError: Converting circular structure to JSON
        --> starting at object with constructor 'Subscriber'
        |     property '_subscriptions' -> object with constructor 'Array'
        |     index 0 -> object with constructor 'MapSubscriber'
        --- property '_parentOrParents' closes the circle
        at JSON.stringify (<anonymous>)
        at JsonPipe.transform (common.js:4752)
        at Module.ɵɵpipeBind1 (core.js:25782)
        at TicketlistComponent_Template (ticketlist.component.html:4)
        at executeTemplate (core.js:9600)
        at refreshView (core.js:9466)
        at refreshComponent (core.js:10637)
        at refreshChildComponents (core.js:9263)
        at refreshView (core.js:9516)
        at refreshEmbeddedViews (core.js:10591)

它似乎是在从服务返回可观察对象后立即发生的

AppModule

import { NgModule, ViewChild } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
import { MatButtonModule } from '@angular/material/button';
import { MenuComponent } from './menu/menu.component';
import { MatDividerModule } from '@angular/material/divider';
import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
import { HomeComponent } from './home/home.component';
import { TicketlistComponent } from './ticketlist/ticketlist.component';
import { TicketdetailComponent } from './ticketdetail/ticketdetail.component';
import { TicketcenterComponent } from './ticketcenter/ticketcenter.component';
import { HttpClientModule } from '@angular/common/http';


@NgModule({
  declarations: [
    AppComponent,
    MenuComponent, 
    HomeComponent, TicketlistComponent, TicketdetailComponent, TicketcenterComponent
  ],
  imports: [
    BrowserModule, 
    BrowserAnimationsModule, 
    AppRoutingModule, 
    MatMenuModule, 
    MatButtonModule, 
    MatDividerModule, 
    NgbNavModule, 
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {

 }

应用组件

import { Component, OnInit } from '@angular/core';
import { HomeComponent } from '../app/home/home.component';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
  title = 'Charity';

  ngOnInit(home = HomeComponent){
    
  }
  
}

应用程序路由模块

import { Component, NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TicketlistComponent } from './ticketlist/ticketlist.component';

const routes: Routes = [
  { path: "ticketList", component: TicketlistComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

连接服务

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { ITicketList } from '../interfaces/i-ticket-list';

@Injectable({
  providedIn: 'root'
})
export class ConnectionsService {

  constructor(private http : HttpClient) { }

  myServer: string = "https://localhost:5001/"

  getTicketList(): Observable<ITicketList[]>
  {
    console.log('getTicketList()')
    return this.http.get<ITicketList[]>(this.myServer + "Tickets/getTickets")
  } 
}

工单组件

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { ITicketList } from '../interfaces/i-ticket-list';
import { ConnectionsService } from '../services/connections.service';

@Component({
  selector: 'app-ticketlist',
  templateUrl: './ticketlist.component.html',
  styleUrls: ['./ticketlist.component.scss']
})
export class TicketlistComponent implements OnInit {

  constructor(private connService : ConnectionsService) { }

  getTickets$ : Observable<ITicketList[]> | any;

  getTickets()
  {
    console.log('getTickets')
    this.getTickets$ = this.connService.getTicketList().subscribe();
  }

  ngOnInit(): void {

    console.log('ngOnInit')
    this.getTickets();

  }

}

门票列表html

<p>ticketlist works!</p>

<!-- <div *ngIf="getTickets$ | async as getTickets; else loading"> -->
    {{ getTickets$ | json }}
<!-- </div> -->

<!-- <ng-template #loading>
    loading...
</ng-template> -->

ITicketList（接口）

export interface ITicketList {

    ticketId : string, 
    customerId: string, 
    createdOn: Date, 
    statusId: number, 
    statusDesc: string

}

示例负载

[{"ticketId":"b4d8e061-1bd9-eb11-8f59-9408532f1cc6","customerId":"b3d8e061-1bd9-eb11-8f59-9408532f1cc6","createdOn":"2021-06-29T16:48:40.44","statusId":1,"statusDesc":"Open"}]

Answer 1

通过读取错误调用堆栈，我认为是这一行：

{{ getTickets$ | json }}

你不能json 管道 Observable 流。

它应该是这样的：

<div *ngIf="getTickets$ | async as getTickets; else loading">
    {{ getTickets | json }}
</div>

使用构造函数 'Subscriber' 从对象开始将循环结构转换为 JSON

Converting circular structure to JSON starting at object with constructor 'Subscriber'

circular-reference

rxjs

typescript

angular