访问从其他组件中的服务创建的数据会抛出超过Angular的调用堆栈大小

Question

我正在制作一个有角度的网站，在这个网站中，我需要从服务中检索一组数据，并将其传递给多个组件。

最初，我只需获得就可以获得这项服务

Observable<Itinerary[]>(行程只是我为收集正确的信息而制作的模型(

所以我在服务中做到了这一点。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Itinerary } from 'src/app/Models/itineary';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class ItineraryService {
apiUrl = 'this is my url here'

constructor(private _http: HttpClient) { }
getUsers(){
return = this._http.get<Itinerary[]>(this.apiUrl);

}

然后，我会在一个组件中调用它，并在其上循环，将其分解为存储在每个组件中的较小数组。

我认为这不是实现这一目标的好方法。因此，我基本上完成了我在服务中的每个组件中所做的工作，并计划直接从这里访问阵列。

所以我做了这个

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Itinerary } from 'src/app/Models/itineary';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class ItineraryService {
apiUrl = 'this is myurl'
itinerarys: Observable<Itinerary[]>;
all: Itinerary;
updatedBy: Itinerary;
hotelBookings: Itinerary;
items: Itinerary;
itineraryId: Itinerary;
constructor(private _http: HttpClient) { }
getUsers(){
this.itinerarys= this._http.get<Itinerary[]>(this.apiUrl);
this.itinerarys.forEach(obj => {
Object.entries(obj).forEach(([key, value]) => {
this.all = value;
if (key == "hotelBookings"){

this.hotelBookings = value;

}else if (key == "itineraryId")
{
this.itineraryId = value;
}else if (key == "items")
{
this.items = value;
}
else if (key == "updatedBy")
{
this.updatedBy = value;

} 
});  
});
}

希望我可以在的每个组件中都这样做

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Itinerary } from 'src/app/Models/itineary';
import { ItineraryService } from 'src/app/Services/Itineary/itinerary.service';
@Component({
selector: 'app-side-nav-itinerarys-depatures',
templateUrl: './side-nav-itinerarys-depatures.component.html',
styleUrls: ['./side-nav-itinerarys-depatures.component.css']
})
export class SideNavItinerarysDepaturesComponent implements OnInit {

hotelBookings: Itinerary;

constructor(private itineraryService : ItineraryService) { }
ngOnInit(): void {
this.hotelBookings= this.itineraryService.hotelBookings;


}
}

然而，这正在创建这个错误，我不确定为什么或如何修复。我知道这意味着一切都是连续调用的，但我找不到在哪里或如何调用。

core.js:4352 ERROR RangeError: Maximum call stack size exceeded
at applyView (core.js:9461)
at addViewToContainer (core.js:8899)
at ViewContainerRef.insert (core.js:10181)
at ViewContainerRef.createEmbeddedView (core.js:10127)
at NgIf._updateView (common.js:3481)
at NgIf.set ngIfElse [as ngIfElse] (common.js:3462)
at setInputsForProperty (core.js:8787)
at elementPropertyInternal (core.js:7831)
at ɵɵproperty (core.js:14709)
at SideNavItinerarysComponent_ng_template_21_Template (side-nav-itinerarys.component.html:59)

Answer 1

解决了这是由于side-nav iti中html模板中的NGif标记造成的，如错误消息的最后部分所示。此错误消息可能发生在任何无限循环/条件下。