Ngx-граф не показывает правильно узлы и ребра

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 (ядро. 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];

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