Question

我有一个组件device-row，我想使用它来代表许多不同的设备，它们都通过引导程序组织成行。为了构造这些设备行，我需要能够为每个设备传递该组件一个不同的device对象。使用每个设备的详细信息，可以构造一个新的device-row并将其呈现给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，它利用服务返回一些Serial对象。串行对象被传递到device-row，以便通过HTML模板初始化行。

export class HomeComponent implements OnInit {

  serials: Serial[];

  constructor(private serialService: SerialService) { }

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

}

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

<div class="container">
  <div class="row">
    <div class="col-12" *ngFor="let serial of serials">
      <app-device-row [serial]="serial"></app-device-row>
    </div>
  </div>
</div>

当前我遇到以下错误。

HomeComponent.html:12 ERROR TypeError: Cannot set property 'serialNumber' of undefined
    at DeviceRowComponent.ngOnInit

之所以发生这种情况，是因为device-row.component.ts文件正在执行其逻辑以设置serial对象的值之前设置值，从而引发类型错误。 Angular似乎执行javascript的顺序似乎与我的想法背道而驰。我需要做些什么才能使其正常工作？

Answer 1

将代码从Mapping移至ngOnInit生命周期挂钩。

每当更改属性绑定值时，都会调用

ngOnChanges。

对于您而言，ngOnChanges值仅在从服务调用获取数据后才传递。所以这是一个异步操作。 serial在分配给属性的ngOnInit值之前被调用。

serial

Answer 2

使用

For Each row In grid1.Rows.Cast(Of DataGridViewRow)().Concat(grid2.Rows.Cast(Of DataGridViewRow)())
    '...
Next

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

，并且不要通过@Input() serial;。它应该在您的serial object data into OnInit函数中。如果有任何行更改，这将更新表的行运行时间。

还要确保@Input和其他所有对象在您的类或接口中可用。

使用* ngFor通过传递对象初始化组件时发生TypeError

2 个答案: