Angular中向子组件传递数据遇问题，求解决方案

我帮你梳理了代码里的几个关键问题，咱们一个个来解决：

1. 输入属性传递方式错误 #

你在父组件模板里用了 comments={{story.comments}}，这种插值表达式会把数组转换成字符串（比如变成 [object Object],[object Object]），而不是直接传递数组对象给子组件的 @Input()。

修复方法：使用Angular的属性绑定语法（方括号）来传递数组：

<div *ngIf="story" style="text-align: center">
  <app-comments [comments]="story.comments"></app-comments>
</div>

2. 父组件的Story接口缺少comments字段 #

你的父组件里定义的Story接口只有author、story、image三个属性，但你尝试传递story.comments，这会导致TypeScript编译警告，同时如果后端返回的story对象有comments，TypeScript也无法正确推断类型。

修复方法：更新父组件的Story接口，添加comments字段：

interface Story {
  author: string,
  story: string,
  image: string,
  comments: Comment[]  // 新增这一行
}

（父组件里已经定义了Comment接口，刚好可以直接复用）

3. 子组件的空值安全问题 #

子组件模板里的*ngIf="comments.length > 1"存在两个问题：

• 如果comments还没从父组件传过来（比如异步加载完成前），它会是undefined，直接访问length会抛出错误；
• length > 1意味着只有当评论数大于1时才显示，大概率你想的是有评论就显示（比如length > 0）。

修复方法：添加空值检查，同时调整判断条件：

<div *ngIf="comments?.length > 0">
  <ul>
    <li *ngFor="let comment of comments; let i = index">
      {{comment.name}}: {{comment.text}}
    </li>
  </ul>
</div>

这里用了Angular的安全导航操作符?.，可以避免comments为undefined时的报错。

额外验证步骤 #

为了确保后端返回的数据确实包含comments数组，你可以在父组件的subscribe里加个日志检查：

ngOnInit() {
  this.dataService.getStory({id: this.storyID}).subscribe((story) => {
    this.story = story;
    console.log('返回的评论数据：', story.comments); // 确认是否有正确的数组数据
  });
}

把这些修改完成后，应该就能正常把评论数据传递给子组件并渲染了。

内容的提问来源于stack exchange，提问作者Dennis Braun