Использование * ngFor для передачи объекта компоненту передает только первый

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]
})

Код

Ваш корневой компонент здесь EmployeeTable, и он должен быть единственным, предоставленным в массиве boostrap.