Can not show list with ngIf

Question

Here is the component.ts file code;

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() {
      }

    }

And here is the html code

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

I am trying to show each comment in the DISH object, but can not list the comments.

It shows me like this

Comments

[object Object],[object Object],[object Object],[object Object],[object Object]**

Can anyone help me what is the missing part? What am i doing wrong?

Answer 1

try this:

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

Answer 2

dish.comments is an array. You cannot print it out like that, you should use an *ngFor and access the properties appropriately. Something like this:

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