Question

当我尝试将方法onDeleteComment传递给另一个组件时，出现以下错误消息。

messageId = [对象对象]

错误TypeError：无法读取未定义的属性“文本”

messages-item.component.ts

onDeleteComment(messageId: string, comment: Comment) {
  /* For debugging purpose only x*/
  console.log('messageId = ' + messageId);
  console.log('comment.text = ' + comment.text);

  //this.commentService.deleteMessageComment(messageId, comment);
}

messages-item.component.html

<div class="component-container" *ngIf="message$ | async as message; else loading">

  /* ... */

  <div *ngFor="let comment of message.comments">
    <app-comments-item
      [commentId]="comment"
      (deleteComment)="onDeleteComment($event)"
      [sourceId]="message._id">
    </app-comments-item>
  </div>

</div>

comments-item.component.ts

export class CommentsItemComponent implements OnInit {
  comment$: Observable<Comment>;
  @Input() commentId: string;
  @Output() deleteComment = new EventEmitter<{sourceId: string, comment: Comment}>();
  @Input() sourceId: string;

  /* ... */

}

comments-item.component.html

<div class="component-container" *ngIf="comment$ | async as comment; else loading">
  <div class="header-container">

    /* ... */

    <div class="buttons-container">
      <button mat-icon-button type="button" (click)="deleteComment.emit({sourceId: sourceId, comment: comment})">
      </button>
    </div>
  </div>

 /* ... */

</div>

如何在我的邮件项目组件中添加评论？

预先感谢您的帮助。

Answer 1

$ event将是一个具有两个属性的对象。

像这样更改您的功能：

onDeleteComment(event: {sourceId: string, comment: Comment}) {
  /* For debugging purpose only x*/
  console.log('messageId = ', event.sourceId);
  console.log('comment.text = ', event.comment.text);

  //this.commentService.deleteMessageComment(messageId, comment);
}

发出的值不会与EventEmitter一起冒泡

1 个答案: