对象字面量只能指定已知属性，而“设置”类型中不存在“选择”

Question

当我尝试用 Angular 编写这段 javascript 代码时，我错过了什么？

 ngOnInit() {


  $('#jithesh').DataTable( {
    columnDefs: [ {
        orderable: false,
        className: 'select-checkbox',
        targets:   0
    } ],
    select: {
        style:    'os',
        selector: 'td:first-child'
    },
    order: [[ 1, 'asc' ]]
} );

这是原始的java脚本

$(document).ready(function() {
    $('#example').DataTable( {
        columnDefs: [ {
            orderable: false,
            className: 'select-checkbox',
            targets:   0
        } ],
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
        order: [[ 1, 'asc' ]]
    } );
} );

试图遵循这个例子中的内容

https://datatables.net/extensions/select/examples/initialisation/checkbox.html

Answer 1

1. 如果可以的话，避免使用 Angular 的 jQuery

2. 当您在 ngOnInit() 中运行 jQuery 时，您的元素不在 DOM 中。相反，请将您的代码从 ngOnInit() 移动到 ngAfterViewInit()。

演示：https://stackblitz.com/edit/angular-mn2776

此演示向您展示了在组件的初始生命周期挂钩期间document.getElementById('id').outerHTML 的结果：

• ngOnInit() - 未定义
• ngAfterContentInit() - 未定义
• ngAfterViewInit() - 外层HTML

使用的代码：

  ngOnInit() {
    this.onInit = this.getOuterHtml();
  }

  ngAfterContentInit() {
    this.afterContentInit = this.getOuterHtml();
  }

  ngAfterViewInit() {
    setTimeout(() => {
      this.afterViewInit = this.getOuterHtml();
    })    
  }

  private getOuterHtml() {
    const el = document.getElementById('el');
    return el ? el.outerHTML : 'undefined';
  }

文档：https://angular.io/guide/lifecycle-hooks