Chrome „RESTAURANT_NAME“ ist nicht definiert, sondern auf der Seite tatsächlich zeigt den Wert

Question

Hier ist die Fehlermeldung in der Entwickler-Konsole

ERROR TypeError: Cannot read property 'restaurant_name' of undefined at Object.eval [as updateRenderer] (RestaurantDetailComponent.html:2) at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js:13094) at checkAndUpdateView (core.es5.js:12241) at callViewAction (core.es5.js:12601) at execComponentViewsAction (core.es5.js:12533) at checkAndUpdateView (core.es5.js:12242) at callViewAction (core.es5.js:12601) at execEmbeddedViewsAction (core.es5.js:12559) at checkAndUpdateView (core.es5.js:12237) at callViewAction (core.es5.js:12601) ...

Aber in meiner Detailseite, wird der Wert in restaurant_name tatsächlich beschwert angezeigt . Hier

ist der Code für Detailseite Implementierung: Datei: Restaurant-detail.component.ts

import { Component, OnInit, Input } from '@angular/core'; 
import { Restaurant } from '../restaurant'; 
import { RestaurantService } from '../restaurant.service'; 
import { ActivatedRoute } from '@angular/router'; 


@Component({ 
    selector: 'app-restaurant-detail', 
    templateUrl: './restaurant-detail.component.html', 
    styleUrls: ['./restaurant-detail.component.css'] 
}) 
export class RestaurantDetailComponent implements OnInit { 
    id: Number; 
    sub: any; 
    @Input() restaurant: Restaurant; 
    constructor(private restaurantService: RestaurantService, private route: ActivatedRoute) { } 

    ngOnInit() { 
    this.sub = this.route.params.subscribe(params => { 
     this.id = +params['id']; // (+) converts string 'id' to a number 
    }); 
    this.restaurantService.getRestaurant(this.id).then(
     res => this.restaurant = new Restaurant(res.id, res.restaurant_name, res.description 
     , res.phone, res.address, res.category)); 
    } 

} 

Datei: Restaurant-detail.component.html

Restaurant detail page with Id: {{ id }} 
<section> 
    Name: {{ restaurant['restaurant_name'] }} 
</section> 

Datei: Restaurant- service.ts

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 
import { ActivatedRoute, Params } from '@angular/router'; 
import { Location } from '@angular/common'; 

import 'rxjs/add/operator/toPromise'; 

import { Restaurant } from './restaurant'; 
@Injectable() 
export class RestaurantService { 
    private restaurantUrl = 'api/restaurant'; // URL to web API 
    constructor(private http: Http) { } 

    //Get all restaurants 
    getRestaurants(): Promise<Restaurant[]> { 
    return this.http.get(this.restaurantUrl) 
     .toPromise() 
     .then(response => response.json(). 
     map(x => new Restaurant(x.id, x.restaurant_name, x.description, x.phone, x.address, 
      x.category))) 
     .catch(this.handleError); 
    } 

    getRestaurant(id: Number):Promise<Restaurant>{ 
    return this.http.get(this.restaurantUrl + "/" + id) 
    .toPromise() 
    .then(response => response.json()); 
    } 
    private handleError(error: any): Promise<any> { 
    console.error('Error', error); 
    return Promise.reject(error.message || error); 
    } 
} 

Ich benutze Spring Boot als meine Backend abrufen die Daten. Momentan scheint es zu funktionieren, aber ich möchte wissen, warum ich diesen Fehler bekommen habe und wie ich ihn beheben kann, danke.

Voll Github Code: https://github.com/zhengye1/Eatr/tree/dev

Answer 1

Es beschwert Ursache mit anfänglichem macht diesen Wert nicht definiert ist und zeigt erst nach Anfrage.

Um es zu beheben stellen Sie den Anfangswert des Restaurants ein.

@Input() restaurant: Restaurant = {}; 

Aber Sie sind vorbei Restarurant nicht so können Sie einfach ohne

Eingang schreiben

restaurant: Restaurant = {}; or new Restarurant depends on object. 

Oder die letzte gerade benutzen? in der Vorlage, die angular sagt, dass dieser Wert undefiniert sein kann.

Name: {{ restaurant?.restaurant_name }} 

Answer 2

Versuchen Sie, das Restaurant-detail.component.html wie unten mit einem druckt als solche in der Konsole *ngIf

<section *ngIf="restaurant"> 
    Name: {{ restaurant['restaurant_name'] }} 
</section> 

Der Grund verändert sich, weil das Restaurant wohl nicht definiert ist. Durch das Hinzufügen einer *ngIf wird nur die Ansicht wiedergegeben, nachdem der Restaurantvariablen ein Wert zugewiesen wurde.

Extra: Bis diese Daten zugewiesen oder geladen werden, können Sie einen Loader hinzufügen. Wenn Sie angular 4 verwenden, schauen Sie sich *ngIf else as well an. Oder sonst können Sie Ihr eigenes auch schreiben.