角度顯示CONST內部的所有評論

Question

我正在嘗試使其顯示在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> 

Answer 1

為了達到預期效果，請在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和component以使其正常工作