Angular / DataTables: TypeError: невозможно прочитать свойство aDataSort из undefined с двумя вызовами API

Question

Я потратил несколько часов, пытаясь разобраться в этой проблеме, и не могу найти ответ, который подходит для моего случая.

Проблема

Я хочу отображать в DataTable данные, составленные с помощью двух вызовов API. Эти вызовы выполняются в службе, а затем данные передаются как субъекты. Компонент, подписанный на тему, затем отображает данные в таблице данных.

Проблема в том, что таблица данных не отображается, и у меня есть ошибка: TypeError: Cannot read property 'aDataSort' of undefined. Этой проблемы не возникало, когда мой источник данных поступал из одного вызова API, и я подозреваю, что меня беспокоит то, что объект данных пытается создать экземпляр до загрузки данных. Я могу исправить проблему с помощью*ngFor by У меня есть другие виды ошибок, и я бы предпочел не делать этого так.

---

Короче говоря, мой вопрос: что я делаю не так?

---

Код

Вот упрощенная версия моего кода

api.service.ts

import {Subject, Subscription} from 'rxjs';
import {HttpClient} from '@angular/common/http';
...

export class APIService implements OnDestroy {
  // first data to be retrieved
  private data1: data1Structure;
  data1Subject = new Subject<data1Structure>();
  data1Subscription: Subscription;

  // second data to be retrieved
  private data2: data2Structure[];
  data2Subject = new Subject<data2Structure[]>();

  constructor(private http: HttpClient) {}

  emitData1Subject(){
    this.data1Subject.next(this.data1);
  }

  getData1() {
    this.http
      .get(`${this.baseURL}data1.json`)
      .subscribe(
        (response) => {
          this.data1Source = response;
          this.emitData1Subject();
        },
        (error) => { console.log(error); }
      );
  }

  emitData2Subject(){
    this.data2Subject.next(this.data2.slice());
  }

  getData2(){
    this.data1Subject.subscribe((data) => {
      this.data1 = data;
      this.http
        .get(`${this.baseURL}data2.json`)
        .subscribe(
          (response) => {
            // Combine the two datasets
            this.data2 = this.formatData2(response);
            this.emitData2Subject();
          },
          (error) => { console.log(error); }
        );
    });
  }
  ...
}

datatable.component.ts

import {ApiService} from '../../../services/api.service';
...

export class DatatableComponent implements OnInit, OnDestroy {

  data2Subscription: Subscription;
  colSettings = [
    {title: '#', data: 'Hid', width: '5%', visible: false},
    {title: 'Date', data: 'date', width: '45%'},
    {title: 'Title', data: 'title', width: '50%'}
  ];
  dtTrigger: Subject<boolean> = new Subject();
  dtOptions: DataTables.Settings;

  constructor(private apiService: ApiService) {
    // first API call
    this.apiService.getData1();
  }

  ngOnInit(): void {
    // second API call
    this.apiService.getData2();
    this.data2Subscription = this.apiService.data2Subject.subscribe(
      (data2) => {
        this.dtOptions = this.dataTable.getTableSettings(data2, this.colSettings);
        this.dtTrigger.next();
      },
      (error) => { console.log(error); }
    );
  }

  getTableSettings(records, colSettings: DataTables.ColumnSettings[]): DataTables.Settings {
    return {
      data: records,
      columns: colSettings,
      pagingType: 'full_numbers',
      pageLength: 50,
      deferRender: true,
      dom: 'lBfrtip'
    };
  }
}

datatable.component.html

<table id="data2" datatable [dtOptions]="dtOptions" [dtTrigger]="dtWTrigger" class="row-border hover"></table>

Среда

Angular version: 9.1.1
Datatables version: 9.0.2
Chrome / Mac OS Catalina 10.15.5

Надеюсь, мой вопрос не слишком сбивает с толку, я действительно не могу понять, что делать, чтобы решить эту проблему...

Большое спасибо за Вашу помощь!

Изменить: исправить отступ

Answer 1

Я настоятельно рекомендую вам изменить способ выполнения запросов и объединить их в один Observable. Поскольку вы используете результаты своих HTTP-запросов в своем шаблоне, лучше всего использоватьasync pipe с финальным объединенным Observable:

compiledData$: Observable<CombinedDataObjectType>; // create a custom type here

ngOnInit() {
  this.compiledData$ = this.http.get('firstUrl').pipe(
    switchMap(firstData => this.http.get('secondUrl').pipe(
      map(secondData => ({ firstData, secondData }))
    )),
  );
}

Теперь ваш Observable излучает объект, содержащий оба набора данных, поэтому в шаблоне:

<div *ngIf="compiledData$ | async as data">
  <!-- Consume data here -->
</div>

По сути, избегайте логики в subscribeобратные вызовы, и, по сути, избегайте подписки в TS, где это возможно. Почти всегда есть более элегантный, производительный и простой в обслуживании способ делать что-либо!