CODEWITHSUNDEEP
angulartypescriptdata-binding
Kasun Hasanga
Kasun Hasanga

Reputation: 1945

Angular 10 : Property 'comments' does not exist on type 'typeof Dish'

//This is the Error Message in Terminal r

In localhost it says Cannot GET /

This is similar to the shopping cart I try to get data from external class(dishes.ts) and by clicking shopping Item it should show the description of Item and its view //This is the Component.html code

    <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">
    <mat-card *ngIf="dish">
        <mat-card-header>
            <mat-card-title>
                <h1 style="font-weight: bold"> {{dish.name | uppercase}}</h1>
            </mat-card-title>
        </mat-card-header>
        <mat-card-content>
            <img height="300px" src="{{dish.image}}" alt="{{dish.name}}">
            <h3> {{dish.description}}</h3>
        </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">
    <h1 style="font-weight: bold">Comments</h1>
    <mat-list *ngIf="dish">
        <mat-list-item *ngFor="let cm of dish.comments">  
        <h4 matLine>{{cm.comment}} </h4>
        <p matLine>{{cm.rating}} star </p>
        <p matLine>-- {{cm.author}} {{ cm.date | date}}</p>
    </mat-list-item>
    </mat-list>
  </div>
</div>

//This is the Component.ts code

import { Component, OnInit, Input } from '@angular/core';
import {Dish} from '../shared/dish';
import{DISHES} from '../shared/dishes';
@Component({
  selector: 'app-dish-details',
  templateUrl: './dish-details.component.html',
  styleUrls: ['./dish-details.component.scss']
})
export class DishDetailsComponent implements OnInit {

  dishes : Dish[]= DISHES;
  @Input()
  dish =Dish;

  constructor() { }

  ngOnInit(): void {
  }

}

And also I added this to my github (https://github.com/KasunHasanga/AngularConFusion.git)

Upvotes: 3

Views: 1918

Answers (1)

izmaylovdev
izmaylovdev

Reputation: 1880

use dish: Dish; instead of dish = Dish; if you want declare type. Now you save to dish variable class instead fo class instance;

Upvotes: 3

Related Questions