如何在Angular中使用json2html和jquery？

Question

我的任务是将现有的UI集成到另一个已经存在的Angular应用程序中，并在此问题上停滞不前。

我知道data +转换在Angular上下文之外工作得很好。

我没有看到用于jquery json2html的npm包，所以我尝试以一种特别的方式导入该部分，将其保存在组件的目录中。

它生成ERROR TypeError: $(...).json2html is not a function...

...
import * as $ from 'jquery';
import json2html from 'json2html';
import * from './jquery.json2html.min.js';

...

$('#myTable > tbody').json2html(data,transform);

Answer 1

    npm install node-json2html


    ...
    import json2html from 'json2html';
    import * as $ from 'node-json2html';

    ...

ngAfterViewInit(){
    $('table#myTable > tbody').json2html(data,transform);

}

或,

... 
import json2html from 'json2html';
import * as $ from './jquery.json2html.min.js';

...

$('table#myTable > tbody').json2html(data,transform);

链接：- http://www.json2html.com/

Answer 2

在做任何事情之前，您必须在angular.json中添加jQuery，然后在组件中对其使用jQuery，这样做

....
declare let $: any;    // you can use "jQuery" keyword instead of "$"

@component({
  selector: '...',
  templateUrl: ['...'],
  styleUrls: ['...']
})
export class JqueryExampleComponent implements onInit {

  constructor(private eleRef: ElementRef) {}

  ngOnInit() {
    $(this.eleRef.nativeElement).find('#myTable > tbody').json2html(data,transform);
  }
}

当您使用$(this.eleRef.nativeElement)时，它将获得component dom的树根，然后使用.find('selector')来获得您想要的element。