时间戳

首页 > 解决方案 > 角度显示 CONST 内的所有评论

javascript - 角度显示 CONST 内的所有评论

问题描述

我试图让它显示 const DISH 中的所有评论。问题是当评论嵌入到 const DISH 中时，我不知道如何显示。我已经尝试了一段时间，但不知道。

像这样： *我已经有图片的左侧只是试图让评论显示

import { Component, OnInit } from '@angular/core';
import { Dish } from '../shared/dish';


const DISH = {
  id: '0',
  name: 'Uthappizza',
  image: '/assets/images/uthappizza.png',
  category: 'mains',
  featured: true,
  label: 'Hot',
  price: '4.99',
  // tslint:disable-next-line:max-line-length
  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']
})
export class DishdetailComponent implements OnInit {
  

  dishdetail = DISH;
  review = DISH.comments;
  constructor() { }

  ngOnInit() {
  }

}
<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">
    <div fxFlex *ngIf="dishdetail">
        <mat-card>
            <mat-card-header>
            <mat-card-title>
                <h3>{{dishdetail.name | uppercase}}</h3>
            </mat-card-title>
            </mat-card-header>
            <img mat-card-image src= {{dishdetail.image}}>
            <mat-card-content>
                    <p>{{dishdetail.description}}
                    </p>
                  </mat-card-content>
        </mat-card>
    </div>
  </div>

  <div  fxFlex="40">
    <mat-grid-list cols="2" rowHeight="200px">
        <mat-grid-tile *ngFor="let comments of DISH">
                <mat-grid-tile-footer>
                    <p> {{review.comment}} </p>
                    <p>-- {{review.author}} </p>
                </mat-grid-tile-footer>
        </mat-grid-tile>
    </mat-grid-list>
  </div>


</div>

标签： javascriptangularconstants

解决方案

为了达到预期的结果，请在 ngFor 下面更改以供审核

 <mat-grid-tile *ngFor="let review of reviews">
                <mat-grid-tile-footer>
                    <p> {{review.comment}} </p>
                    <p>-- {{review.author}} </p>
                </mat-grid-tile-footer>
        </mat-grid-tile>

在 component.ts 中：

 reviews = this.DISH.comments;

工作代码供参考 - https://stackblitz.com/edit/angular-rppl1x?file=src/app/app.component.html

问题：由于您的代码中的变量审查review.comments无效，并且review.author值未定义，请按照上述示例更改您的 component.html 和组件以使其正常工作

推荐阅读