Javascript 无法读取属性

当我尝试运行这些时，我的控制台显示以下错误。我试图检查author属性，但无法解决它。作者在名为comment.ts的文件中定义，其中author是一个字符串

松弛闪电链接-

错误类型错误：无法读取未定义的属性“author”

HTML文件-

<div fxFlex="50" *ngIf="dish">
  <mat-list>
    <mat-list-item>
      <h2> Comments </h2>        
    </mat-list-item>
    <mat-list-item *ngFor="let comment of dish.comments">
      <p mat-line>
        <span> {{comment.comment}} </span>
      </p>
      <p mat-line>
        <span> {{comment.rating}} Stars</span>
      </p>
      <p mat-line>
        <span> -- {{comment.author}} {{comment.date | date}} </span>
      </p>
    </mat-list-item>
  </mat-list>
  <mat-list>
    <mat-list-item *ngIf="commentsForm.valid" [hidden]="comment">
      <p mat-line>
        <span> {{comment.comment}} </span>
      </p>
      <p mat-line>
        <span> {{comment.rating}} Stars</span>
      </p>
      <p mat-line>
        <span> -- {{comment.author}}</span>
      </p>
    </mat-list-item>
    </mat-list>

  <form novalidate [formGroup]="commentsForm" (ngSubmit)="onSubmit()">
    <p>
      <mat-form-field class="full-width">
        <input matInput formControlName="author" placeholder="Name" type="text" required>
        <mat-error *ngIf="formErrors.author">
          {{formErrors.author}}
        </mat-error>
      </mat-form-field>
    </p>
    <p>
      <mat-slider formControlName="rating" thumbLabel tickInterval="1" min="1" max="5" step="1" value="5"></mat-slider>   
    </p>
    <p>
      <mat-form-field class="full-width">
        <textarea matInput formControlName="comment" placeholder="Your Comment" rows="12" required></textarea>
        <mat-error *ngIf="formErrors.comment">
          {{formErrors.comment}}
        </mat-error>
      </mat-form-field>
    </p>
    <button type="submit" mat-button class="background-primary text-floral-white" [disabled]="commentsForm.invalid">Submit</button>
  </form>
</div>
<div [hidden]="dish">
  <mat-spinner></mat-spinner><h4>Loading . . . Please Wait</h4>
</div>

---

问题是您试图访问HTML模板中的

comment.author

，但

DishdetailsComponent

类中的

comment

是

未定义的
或
null

只有在方法
onSubmit
的第一行中才可以指定
comment
值，但在下面的几行中，可以为其指定
null

onSubmit() {
    this.comment = this.commentsForm.value;
    const d = new Date();
    this.comment.date = d.toISOString();
    this.dish.comments.push(this.comment);
    console.log(this.comment);
    this.comment = null;  // here's what I mentionned
    this.commentsForm.reset({
      author: '',
      comment: '',
      rating: 5
    });
}

如果您在
*ngIf
中包含
注释
，它应该可以工作

<mat-list>
  <mat-list-item *ngIf="comment && commentsForm.valid" [hidden]="comment">
    <p mat-line>
      <span> {{comment.comment}} </span>
    </p>
    ...



{{comment.comment}

...
请提供最小可复制代码，或创建stackblitz和share@Reza我已经减少了代码。请查收now@Reza我在stackblitz
导入错误中遇到此错误，找不到文件：/index.html
我更新了代码，但仍然面临相同的问题。能否请您提供一个stackblitz来重现此问题。这将使提供建议更容易。这里我附上stackblitz链接。不幸的是，StackBlitz没有运行，我在启动时发现
导入错误，找不到文件：/index.html
。
<mat-list>
  <mat-list-item *ngIf="comment && commentsForm.valid" [hidden]="comment">
    <p mat-line>
      <span> {{comment.comment}} </span>
    </p>
    ...