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

Question

我正在使用 Angular 9，但出现错误。

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

我想在页面上显示评论的实时预览。这是我的代码。

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();
  }

}

这是我的 Review.ts 代码

Review.ts

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

enter image description here

提交有效评论后，评论应加入页面上的常规 cmets。但是我面对“DishdetailComponent”类型上不存在属性“评论”。请指导我。另外请检查我是否更新了问题。

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[];
}

这是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;
}

这是comment.ts

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

请在我的命令行中检查下图是否有错误。

Answer 1

您在 OnSubmit() 中使用“this.comment.date”，但未定义“comment”。 首先声明评论。

或者看起来你想这样做（因为没有使用日期）：

   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

另外，如果您想在评论中添加日期，那么我建议您更改 -

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

到

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