Question

我正在尝试使用jquery-treegrid在角度2中创建树表。 1.我在package.json上添加了一个jquery-treegrid依赖项。 2.安装typescript jquery库： tsd安装jquery 3.添加HTML代码：

  <table class="tree">
    <tr class="treegrid-1">
      <td>Root node</td><td>Additional info</td>
    </tr>
    <tr class="treegrid-2 treegrid-parent-1">
      <td>Node 1-1</td><td>Additional info</td>
    </tr>
    <tr class="treegrid-3 treegrid-parent-1">
      <td>Node 1-2</td><td>Additional info</td>
    </tr>
    <tr class="treegrid-4 treegrid-parent-3">
      <td>Node 1-2-1</td><td>Additional info</td>
    </tr>
  </table>

我的组件类：

declare var jQuery:any;
@Component({
  selector: '[configuration]',
  template: require('./configuration.html'),
  encapsulation: ViewEncapsulation.None,
  styles: [require('./configuration.scss')],
  directives: [Widget, TablesBackgrid, DataTableDirectives],
  providers: [ConfigurationService,
              HTTP_PROVIDERS],
  pipes: [SearchPipe]
})
export class Configuration implements AfterViewInit, OnInit {
  data: ISystem[];
  errorMessage: string;

  constructor(private configurationService: ConfigurationService, private rootNode: ElementRef) {
  }

  ngAfterViewInit() {
    jQuery(this.rootNode.nativeElement.find('.tree')[0]).treegrid();
  }

  ngOnInit(): void {
    this.configurationService.getSystems()
      .subscribe(systems => this.data = systems,
       error => this.errorMessage = <any>error);
  }

}

控制台中的错误：

TypeError: this.rootNode.nativeElement.find is not a function

我在这个论坛上听到了答案但是没有用。是否有其他插件在angular2中运行表树？

Answer 1

我想它应该是

jQuery(this.rootNode.nativeElement).find('.tree')[0].treegrid();

（感动)）

Answer 2

是的，您的代码存在问题。您正在尝试将jQuery方法绑定到DOM元素，但对于它们而言，它们不适用于jQuery对象。所以，你可以改为：

jQuery(this.rootNode.nativeElement).find('.tree').first().treegrid();

如你所说，你正在使用jQuery treegrid，我猜它需要一个jQuery对象，所以你必须删除[0]，因为它将jQ对象转换回DOM元素，而不是你可以使用.first()获取类.tree的第一个元素。

表格树在angular2

2 个答案: