属性'不存在于类型'DishdetailComponent'

Question

I'm using angular 9 and i got an error.

ERROR in src/app/dishdetail/dishdetail.component.ts:81:9 - error TS2339: Property 'comment' does not exist on type 'DishdetailComponent'.

I want to show a real-time preview of the comment on the page. Here is my code.

dishdetail.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { Params, ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { Dish } from '../shared/dish';
import { DishService } from '../services/dish.service';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Review } from '../shared/review';
import { Comment } from '../shared/comment';



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

  reviewForm: FormGroup;
  review: Review;
  @ViewChild('rvwform') reviewFormDirective;
  
  dish: Dish;

  formErrorss = {
   'author': '',
   'comment': ''
  };

  validationMessagess = {
    'author': {
      'required':  'Name is required.',
      'minlength':  'Author name must be at least 2 characters long.'
    },
    'comment': {
      'required':  'Comment is required.',
      'minlength': 'Comment must be at least 5 characters long.'
    }

  }

  constructor(private dishService: DishService, private location: Location, private route: ActivatedRoute, private rf: FormBuilder) {
     this.createReview();
   }

   createReview(){
     this.reviewForm = this.rf.group({
      'author': ['', [Validators.required, Validators.minLength(2)] ],
      'comment': ['', [Validators.required, Validators.minLength(5)] ] 
     });
     
     this.reviewForm.valueChanges
      .subscribe(data => this.onValueChanged(data));

    this.onValueChanged();

   }

   onValueChanged(data?: any) {
    if (!this.reviewForm) { return; }
    const form = this.reviewForm;
    for (const field in this.formErrorss) {
      if (this.formErrorss.hasOwnProperty(field)) {
        // clear previous error message (if any)
        this.formErrorss[field] = '';
        const control = form.get(field);
        if (control && control.dirty && !control.valid) {
          const messages = this.validationMessagess[field];
          for (const key in control.errors) {
            if (control.errors.hasOwnProperty(key)) {
              this.formErrorss[field] += messages[key] + ' ';
            }
          }
        }
      }
    }
  }

  onSubmit(reviewForm) {
   this.review = this.reviewForm.value;
   this.comment.date = new Date().toISOString();
   console.log(this.review);
   this.dish.comments.push(this.comment)
   this.reviewForm.reset({
     author: '',
     rating: 5,
     comment: '' 
   });
   this.reviewFormDirective.resetForm();
  }

  ngOnInit(): void {
    let id = this.route.snapshot.params['id'];
    this.dishService.getDish(id)
      .subscribe(dish => this.dish = dish);
  }

  goBack(): void {
    this.location.back();
  }

}

Here is my code for Review.ts

Review.ts

export class Review{
    author: string;
    rating: number;
    comment: string;
}

enter image description here

Upon submitting the valid comment, the comment should join the regular comments on the page. But im face Property 'comment' does not exist on type 'DishdetailComponent'. Please guide me. Also please check i'm updated the question.

dish.ts
import { Comment } from './Comment';

export class Dish {
    id: string;
    name: string;
    image: string;
    category: string;
    featured: boolean;
    label: string;
    price: string;
    description: string;
    comments: Comment[];
}

This is dishdetails.ts

dishdetails.ts
export class Dishdetails{
    id: string;
    name: string;
    image: string;
    category: string;
    featured: boolean;
    label: string;
    price: string;
    description: string;
    rating: number;
    comment: string;
    author: string;
    date: string;
}

This is comment.ts

comment.ts
export class Comment {
    rating: number;
    comment: string;
    author: string;
    date: string;
}

Please check below image for error in my command line.

Answer 1

You are using "this.comment.date" inside OnSubmit(), but "comment" is not defined. First declare comment.

Or it looks like you want to do this (as date is not used):

   this.review = this.reviewForm.value;
   //this.comment.date = new Date().toISOString();   //Comment this
   console.log(this.review);
   this.dish.comments.push(this.review)              //changed from this.comment

Additionally, If you're looking to add date in comment, then I suggest to change -

class Review{
    author: string;
    rating: number;
    comment: string;
}

TO

 class Review{
   author: string;
   rating: number;
   comment: string,
   date: string
  }