Question

我的问题：

我的应用程序内容未正确显示，但未报告任何错误。我将Debugger for Chrome VSCode用作调试器。

层次树：

Appcomponent-> dishdetailcomponent

我的dishdetail.component.ts文件：

import { Component, OnInit } from '@angular/core';

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 {

  dish = DISH

  constructor() { }

  ngOnInit() {
  }

}

我的dishdetail.component.html文件：

...
    <div fxFlex *ngIf="dish">
        <h3>
          <b>Comments</b>
        </h3>
        <mat-list *ngIf="comments">
            <mat-list-item *ngFor="let comment of comments">
              <p matline>
              <span>{{comments.comment}} + "\n"</span>
              <span>{{comments.star}} + " Stars" + "\n"</span>
              <span>"-- " + {{comments.author}} + " " + {{comments.date | date}}</span>
              </p>
          </mat-list-item>
        </mat-list>
    </div>
...

单词“ comments”正确显示。从mat-list标记开始，一切都消失了。我已经阅读了文档，并尝试使用mat-list和mat-nav-list标签，但它们都不适合我。

我对Angular很陌生。有人可以帮我吗？

Answer 1

您需要使用*ngIf="dish.comments"，因为dish是组件内部唯一可用的属性。并在comment.comment

中使用comment.star，*ngFor等

<div fxFlex *ngIf="dish">
        <h3>
          <b>Comments</b>
        </h3>
        <mat-list *ngIf="dish.comments">
            <mat-list-item *ngFor="let comment of dish.comments">
              <p matline>
              <span>{{comment.comment}} + "\n"</span>
              <span>{{comment.star}} + " Stars" + "\n"</span>
              <span>"-- " + {{comment.author}} + " " + {{comment.date | date}}</span>
              </p>
          </mat-list-item>
        </mat-list>
    </div>

Answer 2

您需要在 dish.comments -

<mat-list *ngIf="dish.comments">
    <mat-list-item *ngFor="let comment of dish.comments">

Answer 3

您已经将dish = DISH放在了班上，但是您在模板中使用了*ngIf="comments"。您需要像dish.comments一样访问它，因为它位于类中。

不仅在那里，而且在很多地方您都假定组件实例上存在comments。另外，您可以在类中执行类似comment = dish.comments的操作，然后不必更改模板。由你决定。

角度：内容未正确显示，尽管未报告任何错误

3 个答案: