クロームは文句は「RESTAURANT_NAME」に定義されていませんが、ページに、それは実際に値ここ

Question

を表示

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) ...

しかし、私の詳細ページでは、開発者のコ​​ンソールにエラーメッセージで、restaurant_nameの値が実際に表示されます。ここで

は、詳細ページの実装のためのコードです： ファイル：レストラン-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)); 
    } 

} 

ファイル：レストラン-detail.component.html

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

ファイル：いるレストラン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); 
    } 
} 

私は取得するバックエンドとして私は春のブートを使用して データ。現在は動作しているようですが、なぜこのエラーが出ているのか、それを解決する方法を知りたいのですが、ありがとうございます。

全Githubのコード：https://github.com/zhengye1/Eatr/tree/dev

Answer 1

それは初期で原因を訴えています。この値は未定義であり、唯一の要求の後に示してレンダリングします。

これを修正するには、レストランの初期値を設定します。

@Input() restaurant: Restaurant = {}; 

しかし、あなただけの入力

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

それとも使用し、最後の1ずに書くことができますので、あなたがrestarurantを渡していませんか？この値が定義されていないことを角度で伝えるテンプレートを使用します。

Name: {{ restaurant?.restaurant_name }} 

Answer 2

は*ngIf

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

で以下のようにレストランはおそらく定義されていないので、それはコンソールのような印刷した理由をレストラン-detail.component.htmlを変更してみてください。 *ngIfを追加すると、値がレストラン変数に割り当てられた後でのみビューがレンダリングされます。

追加番号： データが割り当てられるかロードされるまで、ローダを追加できます。 角度4を使用している場合は*ngIf else as wellをご覧ください。 それ以外の場合は、自分でも書くことができます。