[Résolu] [Angular 2] - Uncaught (in promise): RangeError: Maximum call

Bonjour à tous,

Dans le cadre d'un projet personnel, je suscite votre aide pour régler un petit problème.
Je récupère via un services des informations issue d'un tableau JSON via l'API Google Places. Les informations globale s'affichent correctement mais lors d'un event sur un bouton pour voir le détail by ID,
j'ai l'erreur suivante qui s'affiche : Uncaught (in promise): RangeError: Maximum call stack size exceeded

///////////////////////restaurant.services.ts/////////////////

import { Injectable } from "@angular/core";
import { Http } from "@angular/http";
import { Observable } from "rxjs/Observable";
import { Restaurant } from "../class/restaurant.class";
import "rxjs/add/operator/map";
import "rxjs/add/operator/do"; 
import "rxjs/add/observable/of";
import "rxjs/add/operator/catch";
 
@Injectable()
 
export class RestaurantServices {
 
    private data: any;
    private observable: Observable<any>;
    private url: string = 'app/api/restaurant.json'
 
    constructor(private  http:  Http){}

    getRestaurantFromAPIWithCache() {
 
        if (this.data) {
            return Observable.of(this.data);
        } else if (this.observable) {
            return this.observable;
        } else {
            this.observable = this.http
                .get(this.url)
                .map(res => res.json())
                .map(response => {
                    this.observable = null;
                    this.data = response;
                    return this.data;
                })
                .catch(error => {
                    let errorMsg = 'une erreur ${error.status} est survenu en tentant de joindre ${error.url}';
                    return Observable.throw(errorMsg);
                });
 
            return this.observable;
        }
    }
 
    getRestaurantById(id:any) {
        if (!this.data) {
            return undefined;
        }
        const result = this.data.filter((resto: any) => resto.id === id);
        console.log("Dans restoServices: "+result);
        if (result.length > 0) {
            return result[0]; // recupère le premier élément du tableau
        }
    }
 
}

 
///////////////////////restaurant.list.ts/////////////////
 
import { Component, OnInit } from "@angular/core";
import { Restaurant } from "./class/restaurant.class";
 
import { RestaurantServices } from "./services/restaurant.services";
 
@Component({
  moduleId: module.id,
  templateUrl: "restaurant-list.component.html",
  styleUrls: ['./css/restaurant.css']
})
 
export class RestaurantListComponent implements OnInit {
 
  restos: Restaurant[];
  errorMsg: string = "";
 
  constructor(private _restoServices: RestaurantServices) { }
 
  ngOnInit() {
    //Called after the constructor, initializing input properties, and the first call to ngOnChanges.
    //Add 'implements OnInit' to the class.
    this._restoServices.getRestaurantFromAPIWithCache()
      .subscribe(res => {
        this.restos = res.results;
      });
  }
}

 
///////////////////////restaurant.list.html/////////////////
 
<div *ngFor="let resto of restos">
<div class="col-sm-6 col-md-4">
        <div class="thumbnail">
          <div *ngFor="let images of resto.photos" >
            <img src="https://maps.googleapis.com/maps/api/place/photo?maxwidth=640&maxheight=640&photoreference={{images.photo_reference}}&key=AIzaSyA2VI_ZemIgFgbXo7sHtUms7E7NhURqhTw" alt="img">
          </div>
              <div class="caption">
                <h3>{{resto.name}}</h3>
                  <p id="cityArea">{{resto.vicinity}}</p>
                  <a [routerLink]="['/restaurant', resto.id]">
                    <button type="button" class="btn btn-info center-block" data-toggle="modal" data-target="#myModal">Details <span class="glyphicon glyphicon-info-sign"></span></button>
                  </a>
              </div>
         </div>
      </div>

 
///////////////////////restaurant.details.ts/////////////////
 
import { Component, OnInit, Input } from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";
 
import { Restaurant } from "./class/restaurant.class";
import { RestaurantServices } from "./services/restaurant.services";
 
@Component({
    moduleId:module.id,
    selector:"resto-details",
    templateUrl:"restaurant-details.component.html",
    styleUrls:['./css/restaurant.css']
})
 
export class RestaurantDetailsComponent implements OnInit{
 
    @Input() rt:Restaurant;
    resto:Restaurant;
    title:string ="";
 
    constructor(private route:ActivatedRoute, private router:Router, private _restoServices:RestaurantServices){}
 
        ngOnInit() {
            //Called after the constructor, initializing input properties, and the first call to ngOnChanges.
            //Add 'implements OnInit' to the class.
 
            let id= +this.route.snapshot.params['id'];
            this.resto= this._restoServices.getRestaurantById(id);
            console.log("ID detailPage "+ id);
        }
 
        goBack(){
            this.router.navigate(['/restaurant']);
        }
 
 
}

 
///////////////////////restaurant.details.html/////////////////
 
<resto-details [rt]="resto"></resto-details>
 
<br>
       <!-- Modal -->
  <div *ngIf="resto">
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h2 class="modal-title" id="myModalLabel">{{ rt.name }}</h2>
          </div>
          <div class="modal-body">
              <!-- Description du restaurant  -->
              <div>{{ rt.name }}</div>
              <div>{{ rt.vicinity | uppercase}}</div><br>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal" (click)='goBack()'>Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>			  
<div *ngIf="!resto">Pas de Restaurant correspondant trouvée</div>

Merci pour votre aide
Modifié par Palerm0_57 (26 Oct 2017 - 10:06)