无法使用 ngIf 显示列表答案

【问题标题】：Can not show list with ngIf无法使用 ngIf 显示列表
【发布时间】：2018-05-18 02:21:29
【问题描述】：

这是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 对象中显示每条评论，但无法列出 cmets。

它显示我是这样的

[对象对象],[对象对象],[对象对象],[对象对象],[对象对象]**

谁能帮助我缺少的部分是什么？我做错了什么？

【问题讨论】：

尝试使用JSON管道{{dish.comments | json }}
您需要遍历 cmets 并定义如何显示它们。见angular.io/guide/…

标签： angular angular-material2 angular-components

【解决方案1】：

dish.comments 是一个数组。你不能这样打印出来，你应该使用*ngFor 并适当地访问属性。像这样的：

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

【讨论】：

【解决方案2】：

试试这个：

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

【讨论】：