Angular 5 jQuery-如何修改DOM元素? [英] Angular 5 jQuery - How to modify DOM elements?

问题描述

在directive.ts文件中，我想修改一个DOM元素.当我执行浏览器调试并停止该指令时，我可以检查其元素，但我不知道如何在调试器中看到打字稿中的元素.

In a directive.ts file, I would like to modify a DOM element. When I do a browser debug, and stop in the directive, I can inspect its elements, but I do not know how to access the elements in typescript as I see them in the debugger.

以下是相关的ts代码:

  drawSparklines() {
    console.log("drawSparklines");

    $('.sparkline:not(:has(>canvas))', this.container).each((i, el) => {
      const $el = $(el);
      const sparklineType = $el.data('sparkline-type') || 'bar';

      if($el.nativeElement.innerText === "dataIncome") {
        $el.nativeElement.innerText.val = this.dataIncome;
      }

我在上面添加了条件，试图检查innerText值，并在等于dataIncome的情况下将其更改为类属性.

I added the conditional, above, where I am trying to inspect the innerText value, and change it if it equals dataIncome to a class property.

在调试器中拍摄的所附屏幕截图中，您可以看到innerText属性.但是，如何在ts中实际使用它?

In the attached screen shot taken in the debugger, you can see the innerText property. But, how to actually work with it in ts?

调试器屏幕截图:

感谢您的帮助！鲍勃

推荐答案

我使用调试器中的trial& error解决了该问题.我实际上是在尝试使其变得比所需的更为复杂.不需要jQuery $el和nativeElement.

I solved the problem using trial&error in the debugger. I was actually trying to make it more complicated than needed. No need for jQuery $el, and nativeElement.

这是有效的方法:

  drawSparklines() {
    console.log("drawSparklines");

    $('.sparkline:not(:has(>canvas))', this.container).each((i, el) => {
      const $el = $(el);
      const sparklineType = $el.data('sparkline-type') || 'bar';

      if(el.innerText === "dataIncome") {
        el.innerText = this.dataIncome;
      }

谢谢鲍勃

这篇关于Angular 5 jQuery-如何修改DOM元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！