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

이을 시도해보십시오 JSON 파이프를 사용하는

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