Angular 使用*ngFor通过传递对象初始化组件时出现TypeError

我有一个组件

设备行

，我想用它来表示许多不同的设备，所有这些设备都通过引导程序组织成行。为了构造这些设备行，我需要能够为每个设备向组件传递不同的

device

对象。使用每个设备的详细信息，构造一个新的

设备行

，并呈现给DOM

这是我的DeviceRowComponent

export class DeviceRowComponent implements OnInit {

  @Input() serial: Serial;

  serialNumber: string;
  connected: number;
  disconnected: number;
  neverConnected: number;

  constructor() {
  }

  ngOnInit() {
    this.serialNumber = this.serial.serialNumber;
    this.connected = this.serial.connected;
    this.disconnected = this.serial.disconnected;
    this.neverConnected = this.serial.neverConnected;
  }

}

这是我的HomeComponent，它使用服务返回一些串行对象。串行对象被传递到

设备行

，以便通过HTML模板初始化该行

export class HomeComponent implements OnInit {

  serials: Serial[];

  constructor(private serialService: SerialService) { }

  ngOnInit() {
    this.serials = this.serialService.getSerials();
  }

}

这是my HomeComponent的模板（已更新）

---

之所以发生这种情况，是因为

设备行.component.ts

文件正在执行其逻辑以在

串行

对象设置其值之前设置值，从而引发类型错误。Angular执行javascript的顺序似乎与我脑海中的想法背道而驰。我需要做什么才能让它工作？

将代码从

ngOnInit

移动到

ngOnChanges

生命周期挂钩

每当属性绑定值发生更改时，

ngOnChanges

将被调用

在您的情况下，

serial

值只有在从服务调用获取数据后才会传递。所以这是一个异步操作

ngOnInit

在分配给属性的

serial

值之前被调用

  ngOnChanges() {
    if(this.serial) {
      this.serialNumber = this.serial.serialNumber;
      this.connected = this.serial.connected;
      this.disconnected = this.serial.disconnected;
      this.neverConnected = this.serial.neverConnected;
    }
  }

使用

而不是

@Input（）串行

不要将
串行对象数据传递到OnInit
。它应该在您的
@Input
函数中。如果任何行发生更改，这将更新表行运行时

并且还要确保
serialNumber
和类或接口中可用的所有其他对象。
@Vega My
[serial]
引用的是我设备行中的My
@Input（）serial:serial
，而
“serial”
引用的是
let serial of serials
中声明的序列，这不对吗？嘿，我已经照你说的做了，代码现在可以运行了。但是，尽管Serials数组中有3个串行对象，但仅呈现一个设备行。我已经用我的HomeComponent的新html更新了OP。为什么其他两个没有渲染？你能分享你在
系列[]
中得到的东西吗？这是一个不相关的问题，我现在已经设法解决了。我已将你的答案标记为正确，谢谢！希望，答案解决了问题。你也了解了ngOnInit和ngOnChanges的区别。
HomeComponent.html:12 ERROR TypeError: Cannot set property 'serialNumber' of undefined
    at DeviceRowComponent.ngOnInit

  ngOnChanges() {
    if(this.serial) {
      this.serialNumber = this.serial.serialNumber;
      this.connected = this.serial.connected;
      this.disconnected = this.serial.disconnected;
      this.neverConnected = this.serial.neverConnected;
    }
  }

@Input() set serial(value) {
if(value){
  this.serialNumber = value.serialNumber || null;
};