Блог

Я создаю веб-сайт angular, на котором мне нужно получить кучу данных из сервиса и передать их нескольким компонентам.

Первоначально у меня была эта служба, просто получающая

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)
  

Решаемая проблема связана с тегом ngIf в шаблоне html в side-nav-iti, как показано в последней части сообщения об ошибке. Это сообщение об ошибке может возникнуть при любом бесконечном цикле / условии.