Question

我不确定我在这里做错了什么。

我有一个像这样的循环：

<tr *ngFor="let data of employees">
  <div>{{data}}</div>
</tr>

它按照您的预期运行，只打印集合中的所有对象。

但是当我有

时

<tr *ngFor="let data of employees">
  <employee [employee]="data"></employee>
</tr>

然而，员工的第一个实例没有传递给它的对象。所有其他人都填充了。这是我正在渲染的简单组件。

@Component({
  selector: 'employee',
  templateUrl: './employee.component.html',
})
export class Employee {
 @Input() employee: any;
}

我在这里缺少什么？

这是dom输出：

    </tr>
    <!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}--><tr>
      <div>data</div>
      <employee ng-reflect-employee="[object Object]" ng-version="5.2.10">
<td></td>


</employee>
    </tr><tr>
      <div>data</div>
      <employee ng-reflect-employee="[object Object]">
<td>[object Object]</td>
</employee>

    </tr><tr>
      <div>data</div>
      <employee ng-reflect-employee="[object Object]">
<td>[object Object]</td>
</employee>

Answer 1

错误来自这里：

 @NgModule({
  ...
  bootstrap: [EmployeeTable]
})

Code

这里的根组件是EmployeeTable，它应该是boostrap数组中唯一提供的组件。

使用* ngFor将对象传递给组件只传递第一个

1 个答案: