0

TreeGridComponent 在 ej2 Syncfision 中变得未定义 Angular 当我使用treegrid 时！在该错误消失但仍未定义之后。“依赖”：{“@angular/animations”：“~12.2.0”，“@angular/common”：“~12.2.0”，“@angular/compiler”：“~12.2.0”，“@angular /core": "~12.2.0", "@angular/forms": "~12.2.0", "@angular/platform-b​​rowser": "~12.2.0", "@angular/platform-b​​rowser-dynamic ": "~12.2.0", "@angular/router": "~12.2.0", "@syncfusion/ej2-angular-treegrid": "^19.4.38", "rxjs": "~6.6.0 ", "tslib": "^2.3.0", "zone.js": "~0.11.4" },

import { Component, OnInit, ViewChild } from '@angular/core';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
import { getValue, isNullOrUndefined } from '@syncfusion/ej2-base';
import { BeforeOpenCloseEventArgs } from '@syncfusion/ej2-inputs';
import { MenuEventArgs } from '@syncfusion/ej2-navigations';
import sampleData from './jsontreegriddata';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
    public data: Object[] = [];
    public pageSettings: Object = {};
    public toolbar: String[] = [''];
    @ViewChild('treegrid') 
    public treegrid: TreeGridComponent;
    public editSettings: Object = {};
    public selectionSettings: Object = {};
    public contextMenuItems: Object = {};
  
    ngOnInit(): void {
        console.log({treegrid: this.treegrid})
        this.data = [...sampleData];
        this.pageSettings = { pageSize: 50 };
        this.selectionSettings = { type: 'Multiple' };
        this.contextMenuItems = [
            { text: 'Add Next', target: '.e-content', id: 'addNext' },
            { text: 'Add Child', target: '.e-content', id: 'addChild' },
            { text: 'Delete Row', target: '.e-content', id: 'delRow' },
            { text: 'Edit Row', target: '.e-content', id: 'editRow' },
            { text: 'Multiselect', target: '.e-content', id: 'multiSelect' },
            { text: 'Copy Rows', target: '.e-content', id: 'copyRows' },
            { text: 'Cut Rows', target: '.e-content', id: 'cutRows' },
            { text: 'Paste Next', target: '.e-content', id: 'pasteNext' },
            { text: 'Paste Child', target: '.e-content', id: 'pasteChild' },
            { text: 'Edit Column', target: '.e-headercontent', id: 'editCol' },
            { text: 'New Column', target: '.e-headercontent', id: 'newCol' },
            { text: 'Delete Column', target: '.e-headercontent', id: 'delCol' },
            { text: 'Choose Column', target: '.e-headercontent', id: 'chooseCol' },
            { text: 'Freeze Column', target: '.e-headercontent', id: 'freezeCol' },
            { text: 'Filter Column', target: '.e-headercontent', id: 'filterCol' },
            { text: 'Multisort', target: '.e-headercontent', id: 'multiSort' },
      ];
   }


  contextMenuOpen(arg: BeforeOpenCloseEventArgs): void {
      let elem: Element = arg.event.target as Element;
      let row: Element = elem.closest('.e-row') as Element;
      let uid: string = row && (row.getAttribute('data-uid') as string);
      let items: Array<HTMLElement> = [].slice.call(
          document.querySelectorAll('.e-menu-item')
      );
      for (let i: number = 0; i < items.length; i++) {
          items[i].setAttribute('style', 'display: none;');
      }
      if (elem.closest('.e-row')) {
          if (
              isNullOrUndefined(uid) ||
              isNullOrUndefined(
              getValue(
                  'hasChildRecords',
                  this.treegrid.grid.getRowObjectFromUID(uid).data
              )
          )
      ) {
          arg.cancel = true;
      } else {
          let flag: boolean = getValue(
              'expanded',
              this.treegrid.grid.getRowObjectFromUID(uid).data
          );
          let val: string = flag ? 'none' : 'block';
          document
              .querySelectorAll('li#expandrow')[0]
              .setAttribute('style', 'display: ' + val + ';');
          val = !flag ? 'none' : 'block';
          document
              .querySelectorAll('li#collapserow')[0]
              .setAttribute('style', 'display: ' + val + ';');
       }
     } else {
         let len =
         this.treegrid.element.querySelectorAll('.e-treegridexpand').length;
         if (len !== 0) {
         document
             .querySelectorAll('li#collapseall')[0]
             .setAttribute('style', 'display: block;');
      } else {
          document
          .querySelectorAll('li#expandall')[0]
          .setAttribute('style', 'display: block;');
      }
    }
  }

  contextMenuClick(args: MenuEventArgs): void {
    console.log({ treegrid: this.treegrid });
    if (args.item.id === 'chooseCol') {
      this.treegrid.showColumnChooser = true;
    }
  }
}

[Getting tree grid initialize error][1]
4

0 回答 0