从带有构造函数“Subscriber”的对象开始将循环结构转换为 JSON

Question

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

\n

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

\n

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

\n

应用程序模块

\n

import { NgModule, ViewChild } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\n\nimport { AppRoutingModule } from './app-routing.module';\nimport { AppComponent } from './app.component';\nimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';\nimport { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MenuComponent } from './menu/menu.component';\nimport { MatDividerModule } from '@angular/material/divider';\nimport { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';\nimport { HomeComponent } from './home/home.component';\nimport { TicketlistComponent } from './ticketlist/ticketlist.component';\nimport { TicketdetailComponent } from './ticketdetail/ticketdetail.component';\nimport { TicketcenterComponent } from './ticketcenter/ticketcenter.component';\nimport { HttpClientModule } from '@angular/common/http';\n\n\n@NgModule({\n  declarations: [\n    AppComponent,\n    MenuComponent, \n    HomeComponent, TicketlistComponent, TicketdetailComponent, TicketcenterComponent\n  ],\n  imports: [\n    BrowserModule, \n    BrowserAnimationsModule, \n    AppRoutingModule, \n    MatMenuModule, \n    MatButtonModule, \n    MatDividerModule, \n    NgbNavModule, \n    HttpClientModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {\n\n }\n

\n

应用组件

\n

import { Component, OnInit } from '@angular/core';\nimport { HomeComponent } from '../app/home/home.component';\n\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.scss']\n})\nexport class AppComponent implements OnInit{\n  title = 'Charity';\n\n  ngOnInit(home = HomeComponent){\n    \n  }\n  \n}\n

\n

应用程序路由模块

\n

import { Component, NgModule } from '@angular/core';\nimport { RouterModule, Routes } from '@angular/router';\nimport { TicketlistComponent } from './ticketlist/ticketlist.component';\n\nconst routes: Routes = [\n  { path: "ticketList", component: TicketlistComponent }\n];\n\n@NgModule({\n  imports: [RouterModule.forRoot(routes)],\n  exports: [RouterModule]\n})\nexport class AppRoutingModule { }\n

\n

连接服务

\n

import { Injectable } from '@angular/core';\nimport { HttpClient } from '@angular/common/http';\nimport { Observable } from 'rxjs';\nimport { ITicketList } from '../interfaces/i-ticket-list';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class ConnectionsService {\n\n  constructor(private http : HttpClient) { }\n\n  myServer: string = "https://localhost:5001/"\n\n  getTicketList(): Observable<ITicketList[]>\n  {\n    console.log('getTicketList()')\n    return this.http.get<ITicketList[]>(this.myServer + "Tickets/getTickets")\n  } \n}\n

\n

票务列表组件

\n

import { Component, OnInit } from '@angular/core';\nimport { Observable } from 'rxjs';\nimport { ITicketList } from '../interfaces/i-ticket-list';\nimport { ConnectionsService } from '../services/connections.service';\n\n@Component({\n  selector: 'app-ticketlist',\n  templateUrl: './ticketlist.component.html',\n  styleUrls: ['./ticketlist.component.scss']\n})\nexport class TicketlistComponent implements OnInit {\n\n  constructor(private connService : ConnectionsService) { }\n\n  getTickets$ : Observable<ITicketList[]> | any;\n\n  getTickets()\n  {\n    console.log('getTickets')\n    this.getTickets$ = this.connService.getTicketList().subscribe();\n  }\n\n  ngOnInit(): void {\n\n    console.log('ngOnInit')\n    this.getTickets();\n\n  }\n\n}\n

\n

票务列表 html

\n

<p>ticketlist works!</p>\n\n<!-- <div *ngIf="getTickets$ | async as getTickets; else loading"> -->\n    {{ getTickets$ | json }}\n<!-- </div> -->\n\n<!-- <ng-template #loading>\n    loading...\n</ng-template> -->\n

\n

ITicketList（接口）

\n

export interface ITicketList {\n\n    ticketId : string, \n    customerId: string, \n    createdOn: Date, \n    statusId: number, \n    statusDesc: string\n\n}\n

\n

有效负载示例

\n

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

\n

Answer 1

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

{{ getTickets$ | json }}

你不能通过json管道传输 Observable 流。

它应该是这样的：

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