Question

我有2个组件，一个从外部服务获取数据，另一个显示它。

第一个组件的构造函数：

  constructor( private deviceInfoApi: DeviceInfoApiService ) {
    this.devicesPromise = this.deviceInfoApi.getDevices(false, false, false);
    let tempDevicesPromise = this.deviceInfoApi.getDevices(false, true, false).then(
     result => {
      this.devicesPromise = tempDevicesPromise;
     }
    );
   }

及其模板：

<app-devices-table [devices]="devicesPromise | async"></app-devices-table>

这就是我的所作所为：

我使用getDevices（false，false，false）获取一些数据 - 这个数据提供的信息少于我的要求，但速度更快，足以显示内容
我使用getDevices（false，true，false）获取一些数据 - 由于第二个参数为true，它将为我提供更多信息，但获取响应需要更长时间。

所以我想首先显示一些基本信息，当更详细的包裹发给我时，我会替换它。

第二个组件的输入：

  @Input() devices: Array<any>;

及其模板：

<table class="ui inverted table loading">
    <thead>
      <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Type</th>
        <th>Online</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let device of devices">
        <td>{{ device.Id }}</td>
        <td>{{ device.Name }}</td>
        <td>{{ device.DeviceType }}</td>
        <td>{{ device.IsConnected }}</td>
      </tr>
    </tbody>
  </table>

结果是第一次调用getDevices会返回一些结果并正确显示。一旦第二个结果到来并且我的devicesPromise被替换，它就会中断 - 不显示任何表格。

我将ngOnChanges（）添加到我的第二个组件（带表的组件）：

  ngOnChanges() {
    console.log('CHANGES');
    console.log(this.devices);
  }

我看到第一个getDevices（）结果正常 - console.log显示我的设备。第二个显示“未定义”。

为什么会这样？是不是可以使用异步管道更新输入？我确定第二次调用getDevices（）会返回正确的数据，因为我在第一个组件的代码中记录它。它很好。只有第二个组件将其视为未定义。

Answer 1

修复很简单，我将第一个参数的构造函数更改为：

  constructor( private deviceInfoApi: DeviceInfoApiService ) {
    this.devicesPromise = this.deviceInfoApi.getDevices(false, false, false);
    let tempDevicesPromise = this.deviceInfoApi.getDevices(false, true, false);
    tempDevicesPromise.then(
     result => {
      this.devicesPromise = tempDevicesPromise;
     }
    );
   }

我不确定它为何有所帮助，但它现在有效。

异步管道 - 重新分配时未定义数据

1 个答案: