ngIfでリストを表示できません

Question

ここにcomponent.tsファイルのコードです。

import { Component, OnInit, ViewEncapsulation } from '@angular/core'; 

    const DISH = { 
     name: 'Uthappizza', 
     image: '/assets/images/uthappizza.png', 
     category: 'mains', 
     label: 'Hot', 
     price: '4.99', 
     description: 'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.', 
     comments: [ 
     { 
      rating: 5, 
      comment: "Imagine all the eatables, living in conFusion!", 
      author: "John Lemon", 
      date: "2012-10-16T17:57:28.556094Z" 
     }, 
     { 
      rating: 4, 
      comment: "Sends anyone to heaven, I wish I could get my mother-in-law to eat it!", 
      author: "Paul McVites", 
      date: "2014-09-05T17:57:28.556094Z" 
     }, 
     { 
      rating: 3, 
      comment: "Eat it, just eat it!", 
      author: "Michael Jaikishan", 
      date: "2015-02-13T17:57:28.556094Z" 
     }, 
     { 
      rating: 4, 
      comment: "Ultimate, Reaching for the stars!", 
      author: "Ringo Starry", 
      date: "2013-12-02T17:57:28.556094Z" 
     }, 
     { 
      rating: 2, 
      comment: "It's your birthday, we're gonna party!", 
      author: "25 Cent", 
      date: "2011-12-02T17:57:28.556094Z" 
     } 
     ] 
    }; 

    @Component({ 
     selector: 'app-dishdetail', 
     templateUrl: './dishdetail.component.html', 
     styleUrls: ['./dishdetail.component.scss'], 
     encapsulation: ViewEncapsulation.None 
    }) 
    export class DishdetailComponent implements OnInit { 

     dish = DISH; 

     constructor() { } 

     ngOnInit() { 
     } 

    } 

そしてここでは、htmlコード

<div class="container" 
    fxLayout="row" 
    fxLayout.sm="column" 
    fxLayout.xs="column" 
    fxLayoutAlign.gt-md="space-around center" 
    fxLayoutGap="10px" 
    fxLayoutGap.xs="0"> 

    <div fxFlex="40"> 
    <md-card> 
     <md-card-header> 
     <md-card-title> 
      <h3>{{dish.name | uppercase}}</h3> 
     </md-card-title> 
     </md-card-header> 
     <img md-card-image src={{dish.image}} alt={{dish.name}}> 
     <md-card-content> 
     <p>{{dish.description}} 
     </p> 
     </md-card-content> 
     <md-card-actions> 
     <button md-button>LIKE</button> 
     <button md-button>SHARE</button> 
     </md-card-actions> 
    </md-card> 
    </div> 

    <div fxFlex="40"> 
    <md-card> 
     <md-card-header> 
     <md-card-title> 
      <h3>Comments</h3> 
     </md-card-title> 
     </md-card-header> 
     <md-card-content> 
     <md-list *ngIf="dish.comments"> 
      <p>{{dish.comments}}</p> 
     </md-list> 
     </md-card-content> 
    </md-card> 
    </div> 

</div> 

である私は、DISHオブジェクト内の各コメントを表示しようとしていますが、コメントを一覧表示することができません。

それは誰[オブジェクトのオブジェクト]、[オブジェクトのオブジェクト]、[オブジェクトのオブジェクト]、[オブジェクトのオブジェクト]、[オブジェクトのオブジェクト] **

この

コメント

ように私をすることができ示し欠けている部分は何か助けてください？何が間違っているのですか？

Answer 1

dish.commentsは配列です。そのように印刷することはできません。*ngForを使用し、プロパティに適切にアクセスする必要があります。このような何か：

<md-list *ngFor="let comment of dish.comments"> 
    <p>{{comment.comment}}</p> 
    <p>{{comment.author}}</p> 
</md-list> 

Answer 2

これを試してみてください。

<md-card-content *ngIf="dish.comments"> 
     <md-list *ngFor="let comment of dish.comments"> 
      <p>{{comment.comment}}</p> 
     </md-list> 
</md-card-content>