Javascript 如何解决无法读取属性'；nativeElement'；使用viewchild ElementRef时角度中未定义的

您好，我正在使用ViewChild获取角度中的DOM元素，但出现了如下错误： 无法读取未定义的属性“nativeElement” 我调试了一段时间，但仍在努力。 有人能指出它为什么不起作用吗

html:

过滤节点
所有字符
孩子们
成人
男性的
女性的




过滤边
是
他是一名教师
是的朋友

ts:

从“@angular/core”导入{Component，AfterViewInit，ElementRef，ViewChild}；
从“vis”导入{Network，DataSet，DataView}；
@组成部分({
选择器：“应用程序测试”，
templateUrl:'./test.component.html'，
样式URL:['./test.component.scss']
})
导出类TestComponent实现AfterViewInit{
@ViewChild（'network'，{static:false}）el:ElementRef；
@ViewChild（'nodeFilterSelect'，{static:false}）nodeFilter:ElementRef；
@ViewChild（'edgeFilter'，{static:false}）edgeFilter:ElementRef；
私有网络实例：任意；
ngAfterViewInit（）{
功能启动网络（数据）{
const container=this.el.nativeElement；
this.networkInstance=新网络（容器、数据，{}）；
}
const nodes=new DataSet
函数
startNetwork（data）
位于生命周期挂钩
AfterViewInit
ngAfterViewInit（）
内，这就是原因

<div>
    <label>
        Filter nodes
        <select #nodeFilterSelect>
          <option value=''>All characters</option>
          <option value='kid'>kids</option>
          <option value='adult'>adults</option>
          <option value='male'>male</option>
          <option value='female'>female</option>
        </select>
    </label>

    <br>
    <br>
    <label>
      Filter edges
      <div>
        <label>
          <input type='checkbox' #edgesFilter value='parent' checked></input>
          Is <span style="color:green">parent</span> of
        </label>
      </div>
      <div>
        <label>
          <input type='checkbox' #edgesFilter value='teacher' checked></input>
          Is <span style="color:blue">teacher</span> of
        </label>
      </div>
      <div>
        <label>
          <input type='checkbox' #edgesFilter  value='friend' checked></input>
          Is <span style="color:red">friend</span> of
        </label>
      </div>
    </label>
</div>

<div #network>

</div>



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() {

    function startNetwork(data){
      const container = this.el.nativeElement;
      this.networkInstance = new Network(container, data, {});
    }

     const nodes = 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 = 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'} },
    ], {});

    /**
     * filter values are updated in the outer scope.
     * in order to apply filters to new values, DataView.refresh() should be called
     */
    let nodeFilterValue = ''
    const edgesFilterValues = {
      friend: true,
      teacher: true,
      parent: true
    }

    /*
      filter function should return true or false
      based on whether item in DataView satisfies a given condition.
    */
    const nodesFilter = (node) => {
      if (nodeFilterValue === '') {
        return true
      }
      switch(nodeFilterValue) {
        case('kid'):
          return node.age === 'kid'
        case('adult'):
          return node.age === 'adult'
        case('male'):
          return node.gender === 'male'
        case('female'):
          return node.gender === 'female'
        default:
          return true
      }
    }

    const edgesFilter = (edge) => {
      return edgesFilterValues[edge.relation]
    }

    const nodesView = new DataView(nodes, {filter: nodesFilter})
    const edgesView = new DataView(edges, {filter: nodesFilter})


    this.nodeFilter.nativeElement.addEventListener('change', (e) => {
      // set new value to filter variable
      nodeFilterValue = e.target.value
      /*
        refresh DataView,
        so that its filter function is re-calculated with the new variable
      */
      nodesView.refresh()
    })

    this. edgeFilter.nativeElement.forEach(filter => filter.addEventListener('change', (e) => {
      const { value, checked } = e.target
      edgesFilterValues[value] = checked
      edgesView.refresh()
    }))

    startNetwork({ nodes: nodesView, edges: edgesView })



  }
}