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

它向我展示了这个

[object Object]，[object Object]，[object Object]，[object Object]，[object Object] **

任何人都可以帮我解决缺失的部分吗？我做错了什么？

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>

无法使用ngIf

2 个答案: