Angular 5 jQuery - Как изменить элементы DOM?

Question

В файле directive.ts я хотел бы изменить элемент DOM.Когда я выполняю отладку в браузере и останавливаюсь в директиве, я могу проверять ее элементы, но я не знаю, как получить доступ к элементам в машинописи, как я вижу их в отладчике.

Вотсоответствующий код 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 для свойства класса.

На прикрепленном снимке экрана, сделанном в отладчике, вы можете увидеть свойство innerText.Но как на самом деле работать с ним в TS?

Снимок экрана отладчика:

Спасибо запомогая!Боб

Answer 1

Я решил проблему, используя метод проб и ошибок в отладчике.Я на самом деле пытался сделать это более сложным, чем нужно.Нет необходимости в jQuery $el и 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;
      }

Спасибо, Боб

Answer 2

Взгляните на пример StackBlitz, включенный в нижнюю ветку, это может помочь вам подтолкнуть вас в правильном направлении:

Как выбрать элемент в шаблоне компонента?

ура

Answer 3

это два пути первый: в файле компонента:

document.getElementById("");

и второй способ, если вы измените элемент, чтобы использовать это:

@Component({
  selector: "",
  templateUrl: "",
  host: {
    "(document:click)": "onClickOutsideDropdown($event)"
  }
})
 constructor(private el: ElementRef) {
  }
 onClickOutsideDropdown(event: Event) {
     this.el.nativeElement.contains(event.target) ...
  }