1
votes

Angular 5 jQuery - Comment modifier les éléments DOM?

Dans un fichier directive.ts, je voudrais modifier un élément DOM. Lorsque je fais un débogage de navigateur et que je m'arrête dans la directive, je peux inspecter ses éléments, mais je ne sais pas comment accéder aux éléments en tapé manuscrit tels que je les vois dans le débogueur.

Voici le code ts pertinent :

  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;
      }

J'ai ajouté le conditionnel, ci-dessus, où j'essaie d'inspecter la valeur de innerText, et de le changer si elle est égale à dataIncome à une propriété de classe.

Dans la capture d'écran ci-jointe prise dans le débogueur, vous pouvez voir la propriété innerText. Mais comment l'utiliser dans ts?

Capture d'écran du débogueur:

Merci de votre aide! Bob

angular jquery

0 commentaires

3 Réponses :

1
votes

Jetez un œil à l'exemple de StackBlitz inclus dans le fil de discussion ci-dessous, cela pourrait vous aider à vous pousser dans la bonne direction:

Comment puis-je sélectionner un élément dans un composant modèle?

cheers

1 commentaires

Merci iHazeCode. C'est une lecture utile. Je l'ai suivi il y a quelques mois lorsque j'essayais de résoudre le problème, que le sujet explique bien l'utilisation de @ViewChild. Mais il n'y avait pas grand-chose pour mon problème actuel. J'ai résolu mon essai et erreur sur l'élément DOM. Je vais le décrire dans ma réponse.

0
votes

c'est dans les deux sens première: dans le fichier de composant:

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

et la deuxième manière si vous modifiez l'élément pour l'utiliser:

document.getElementById("");

0 commentaires

1
votes

J'ai résolu le problème à l'aide d'essais et d'erreurs dans le débogueur. J'essayais en fait de rendre les choses plus compliquées que nécessaire. Pas besoin de jQuery $ el et nativeElement .

Voici ce qui a fonctionné:

  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;
      }

Merci, Bob

1 commentaires

Heureux que vous ayez réglé le problème, merci pour le partage! :)