Ngx-graph не отображает правильно узлы и ребра

Question

Я пытаюсь создать граф с помощью библиотеки ngx-graph (я новичок в ней). Я пытаюсь создавать узлы и ребра динамическим способом. Я получаю информацию от службы и помещаю эти данные в два отдельных массива (узлы и края). Проблема в том, что данные передаются правильно, но моя графика создает узлы и края в одном и том же положении (x=0 и y=0). Я тоже пытался форсировать позицию, но не менял.

 <ngx-graph *ngIf="nodes.length > 0 && links.length > 0 && !loading"
    layout="dagre"
    [view]="[800,500]"
    [links]="links" 
    [nodes]="nodes">
  </ngx-graph>

И в моем компоненте.ts я добавляю узлы и ребро:

createGraph() {

   this.nodes = [];
   this.links = [];

   if (this.items) {

   this.nodes.push({
      id: this.items.id,
      label: this.items.description
   });


  if (this.items.motivations) {
    let i = 0;
    for (let motivation of this.items.motivations) {
      ++i;
       this.nodes.push({
         id: motivation .id,
         label: motivation .description
       });

       this.links.push({
         id: motivation .id,
         source: this.nodes[0].id,
         target: motivation .id 
       });
    }

  }
  this.loading = false;
}

}

И в конце я всегда эту ошибку в консоли

ОШИБКА TypeError: невозможно прочитать свойство "измерение" неопределенного значения.
    в swimlane-ngx-graph.js:2016
    в Array.map ()
    в QueryList.push../node_modules/@angular/core/fesm5/core.js.QueryList.map (core.js:5412)
    в GraphComponent.push../node_modules/@swimlane/ngx-graph/fesm5/swimlane-ngx-graph.js.GraphComponent.applyNodeDimensions (swimlane-ngx-graph.js:1988)
    в GraphComponent.push../node_modules/@swimlane/ngx-graph/fesm5/swimlane-ngx-graph.js.GraphComponent.draw (swimlane-ngx-graph.js:1796)
    в swimlane-ngx-graph.js:1768
    в ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    в Object.onInvokeTask (core.js:4053)
    в ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    в Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)

Answer 1

Посмотрите документацию от ngx-graph, как запустить обновление.

Компонент графика обновляется при каждом изменении ввода. Входные данные неизменяемы, поэтому для запуска обновления вам нужно будет передать новый экземпляр объекта.

Например, это не вызовет обновления, потому что мы модифицируем массив узлов на месте, а не создаем новый экземпляр:

this.nodes.push(newNode);

Нам нужно создать новый экземпляр массива, чтобы активировать обнаружение изменений в компоненте:

this.nodes.push(newNode);
this.nodes = [...this.nodes];

Чтобы вручную запустить обновление, график принимает update$ input как наблюдаемое: