Асинхронный канал - данные не определены при переназначении

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>

Вот что я делаю:

1. Я получаю некоторые данные, используя getDevices (false, false, false) - эта информация приносит меньше информации, чем мне требуется, но быстрее и достаточно для отображения чего-либо
2. Я получаю некоторые данные, используя 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 отображает мои устройства.Второй отображает «undefined».

Почему это происходит?Разве невозможно обновить вход с помощью асинхронного канала?Я уверен, что второй вызов getDevices () возвращает правильные данные, потому что я console.logged это в коде первого компонента, и это было хорошо.Только второй компонент видит его как неопределенный.

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

Я не уверен, почему это помогло, но сейчас работает.