конфликты при определении DataView после установки @ type / vis и vis - PullRequest
2 голосов
/ 02 марта 2020

js и angular для отображения некоторых графиков на моей веб-странице. Я установил

npm install vis 
npm install @type/vis

, но обнаружил, что оба имеют функцию DataView. Я хочу использовать DataView для vis, но кажется, angular автоматически находит DataView для @ type / vis.

Мой код выглядит так:


import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
import { Network, DataSet, DataView} from 'vis';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']

})
export class TestComponent implements AfterViewInit {
  @ViewChild('network', {static: false}) el: ElementRef;
  @ViewChild('nodeFilterSelect', {static:false}) nodeFilter: ElementRef;
  @ViewChild('edgesFilter', {static: false}) edgeFilter: ElementRef;
  private networkInstance: any;

  ngAfterViewInit() {
    const nodes_set = new DataSet<any>([
        { id: 1, label: 'Eric Cartman', age: 'kid', gender: 'male' },
        { id: 2, label: 'Stan Marsh', age: 'kid', gender: 'male' },
        { id: 3, label: 'Wendy Testaburger', age: 'kid', gender: 'female' },
        { id: 4, label: 'Mr Mackey', age: 'adult', gender: 'male' },
        { id: 5, label: 'Sharon Marsh', age: 'adult', gender: 'female' }
    ]);

    const edges_set = new DataSet<any>([
        { from: 1, to: 2, relation: 'friend', arrows: 'to, from', color: { color: 'red'} },
        { from: 1, to: 3, relation: 'friend', arrows: 'to, from', color: { color: 'red'} },
        { from: 2, to: 3, relation: 'friend', arrows: 'to, from', color: { color: 'red'} },
        { from: 5, to: 2, relation: 'parent', arrows: 'to', color: { color: 'green'} },
        { from: 4, to: 1, relation: 'teacher', arrows: 'to', color: { color: 'blue'} },
        { from: 4, to: 2, relation: 'teacher', arrows: 'to', color: { color: 'blue'} },
        { from: 4, to: 3, relation: 'teacher', arrows: 'to', color: { color: 'blue'} },
    ]);


    const nodesView = new DataView(nodes_set, {})
    const edgesView = new DataView(edges_set, {})



    const container = this.el.nativeElement;


     const data = { nodes: nodes_set, edges: edges_set };
 [![enter image description here][1]][1]
     this.networkInstance = new Network(container, data, {});

  }
}

вы можете видеть, что я импортирую DataView из vis, но мы ставим курсор на DataView, это выглядит так:

enter image description here

И DataView в @ type / vis:

export class DataView<T extends DataItem | DataGroup> {
  length: number;
  constructor(items: T[]);
}


Кажется, angular находит DataView типа @ type / vis, даже если я импортирую его из vis. Как решить эту проблему?

1 Ответ

2 голосов
/ 02 марта 2020

Вот так работают типы. Они удостоверяются, что вы делаете правильный код. Пакет внутри @types добавляет подсказку типа для пакета vis, которая не предоставляет свои собственные наборы. Чтобы исправить ошибку, вам нужно передать массив, а не объект:

const nodesView = new DataView(nodes_set);
const edgesView = new DataView(edges_set);

Я углубился в это и понял, что пакет vis устарела и больше не поддерживается. Также @types/vis больше не должен использоваться, так как новый проект vis.js предоставляет свои собственные наборы. Таким образом, чтобы начать работу, вам нужно сделать:

npm r vis @types/vis
npm i vis-data

После этого у вас будут правильные наборы текста пакета. Например, конструктор DataView имеет следующую типизацию:

constructor(data: DataInterface<Item, IdProp>, options?: DataViewOptions<Item, IdProp>);

Таким образом, вы можете оставить свой код таким же:

const nodesView = new DataView(nodes_set, {});
const edgesView = new DataView(edges_set, {});

Где второй параметр DataViewOptions со следующим набрав:

export interface DataViewOptions<Item, IdProp extends string> {
  fieldId?: IdProp;
  filter?: (item: Item) => boolean;
}

В качестве примечания, я вижу, что вы используете angular, пакет vis также имеет свою собственную оболочку для angular. Возможно, вы сможете взглянуть на него, если он подходит для вашего проекта: https://github.com/visjs/ngx-vis

...