Angular：内容显示不正确，虽然没有报错答案

【问题标题】：Angular: The contents are not displayed properly, though no errors are reportedAngular：内容显示不正确，虽然没有报错
【发布时间】：2018-12-12 21:25:56
【问题描述】：

我的问题：

我的应用内容显示不正常，但没有报错。我使用 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>
...

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

我对 Angular 还是很陌生。谁能帮帮我？

【问题讨论】：

@John "cmets" 被定义为 "dish" 的一部分。
没错！所以你需要访问dish.comments 才能访问它。

标签： javascript angular typescript

【解决方案1】：

您需要使用*ngIf="dish.comments"，因为dish 是组件内唯一可用的属性。并且在*ngFor里面也可以使用comment.comment、comment.star等等

<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>

【讨论】：

【解决方案2】：

你需要在这里取dish.comments -

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

【讨论】：

【解决方案3】：

您已将dish = DISH 放入类中，但您在模板中使用了*ngIf="comments"。您需要像 dish.comments 一样访问它，因为它就在课堂上。

不仅在那里，而且在您假设组件实例上存在comments 的许多地方。或者，您可以在课堂上执行comment = dish.comments 之类的操作，然后您不必更改模板。这取决于你。

【讨论】：