TypeError: не удается прочитать элементы свойства undefined в файле компонента

Question

Я работаю над задачей получения данных с помощью REST API в angular 8.0.0, при этом я получаю следующие ошибки:

Моей задачей было отобразить данные в таблице матов на странице.

item.ts

import { Execution } from './execution';
export class Items {
    items: Exec[];
}

execution.ts

export class Exec {
    test: number;
    test1: string;
}

Execution.component.ts

export class ExecutionComponent implements OnInit {
  runData: Items;
  constructor(private executionService: ExecutionService) { }  
  displayedColumns: string[] = ['test', 'test1'];  
  //@ViewChild(MatSort, { static: true }) sort: MatSort;

  dataSource = new MatTableDataSource<Execution>(this.runData.items); //error showing at this point
  ngOnInit() { 
    this.executionService.getArtifactDetails().subscribe(
      (response:Items) => {
        this.runData = response;
        console.log(this.runData);
      }
    );  
  }
}

Пример JSON

{
    "items": [
        {
            "test": 1,
            "test1": "ABC"
        },
        {
            "test": 2,
            "test1": "EFG",
    ]
}

Answer 1

this.runData присваивается значение асинхронно. Поэтому его нужно использовать после присвоения значения внутри подписки. Попробуйте следующее:

dataSource: MatTableDataSource<Execution>;

ngOnInit() { 
  this.executionService.getArtifactDetails().subscribe(
    (response: Items) => {
      this.runData = response;
      console.log(this.runData);
      this.dataSource = new MatTableDataSource<Execution>(this.runData.items);
    }
  );  
}

Подробнее о том, как получить доступ к асинхронным данным: { ссылка }