Question

令人沮丧的是以下代码无法正常工作。这是我直接从学习Angular的在线课程中复制和粘贴的代码。代码的目的是当我单击图片时，将显示名片视图和后续注释。但是，当我单击图片时，什么也没有出现。似乎很奇怪，但是其他地方都没有错误。

从代码中可以看到，有一个“共享”文件夹，我在其中存储了所有信息。如果有人需要它们，我可以在此处复制并粘贴它们。

menu.component.ts：

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

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.scss']
})

export class MenuComponent implements OnInit {

  dishes: Dish[] = DISHES;

  selectedDish : Dish;

  onSelect( dish : Dish ) {
    this.selectedDish = dish;
  }

  constructor() { }

  ngOnInit() {
  }

}

dishdetail.component.ts：

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

@Component({
  selector: 'app-dishdetail',
  templateUrl: './dishdetail.component.html',
  styleUrls: ['./dishdetail.component.scss']
})
export class DishdetailComponent implements OnInit {

  @Input()
  dish: Dish

  constructor() { }

  ngOnInit() {
  }

}

dishdetail.component.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" *ngIf="dish">
      <mat-card>
        <mat-card-header>
          <mat-card-title>
            <h3>{{dish.name | uppercase}}</h3>
          </mat-card-title>
        </mat-card-header>
        <img mat-card-image src={{dish.image}} alt={{dish.name}}>
        <mat-card-content>
          <p>{{dish.description}}
          </p>
        </mat-card-content>
        <mat-card-actions>
          <button mat-button>LIKE</button>
          <button mat-button>SHARE</button>
        </mat-card-actions>
      </mat-card>

    </div>

    <div fxFlex="40" *ngIf="dish">
        <mat-list>
          <h3>Comments</h3>
            <mat-list-item *ngFor="let comment of dish.comments">
              <style> .mat-list-item {
                  min-height: 80px;
              }</style>
              <p matline>
              <span>{{comment.comment}}<br></span>
              <span>{{comment.rating}} Stars<br></span>
              <span>-- {{comment.author}} {{comment.date | date}}</span>
              </p>
          </mat-list-item>
        </mat-list>
    </div>

</div>

menu.component.html：

<div class="container"
     fxLayout="column"
     fxLayoutGap="10px">

  <div fxFlex>
    <div>
      <h3>Menu</h3>
      <hr>
    </div>
  </div>

  <div fxFlex>
    <mat-grid-list cols="2" rowHeight="200px">
      <mat-grid-tile *ngFor="let dish of dishes" (click) = "onSelect(dish)">
        <img height="200px" src={{dish.image}} alt={{dish.name}}>
        <mat-grid-tile-footer>
          <h1>{{dish.name | uppercase}}</h1>
        </mat-grid-tile-footer>
      </mat-grid-tile>
    </mat-grid-list>
  </div>

  <app-dishdetail [dish] = "SelectedDish"></app-dishdetail>

</div>

Answer 1

我看到的一件事是：

selectedDish : Dish;

然后这个：

<app-dishdetail [dish] = "SelectedDish"></app-dishdetail>

Angular区分大小写。所以应该是：

<app-dishdetail [dish] = "selectedDish"></app-dishdetail>

小写的“ s”

角度：单击图片时，后续注释不会显示

1 个答案: