Comment obtenir tous les éléments par nom de classe dans Angular 8 à partir du fichier typescript ?

Question

J'essaie d'obtenir tous les éléments par nom de classe à partir du modèle HTML, dans le fichier TS. Voici ce que j'ai essayé jusqu'à présent.

 <div class="form-group" >
            <label class="name"  class="col-sm-2 control-label" [attr.for]="'skillName' + i">
              {{ arr[i]}} {{ i }}
            </label>
          </div>

  ngAfterViewInit()
  {
    let el = this.document.getElementsByClassName('name');
    console.log(el)
    console.log("*")
  }

Answer 1

Si vous voulez utiliser le Dom pour accéder à votre élément, vous devez utiliser ElementRef.

    // ...
    constructor(elementRef: ElementRef) {}
    // ...
    const dom: HTMLElement = this.elementRef.nativeElement;
    const elements = dom.querySelectorAll('.name');
    console.log(elements);

Mais gardez à l'esprit que vous devez utiliser cette API en dernier recours lorsqu'un accès direct au DOM est nécessaire. Utilisez plutôt le templating et le data-binding ou ViewChild et ViewChildren fournis par Angular.

Answer 2

Essayez

const el = document.querySelector('.myclass'); // first
const elArr = document.querySelectorAll('.myclass'); // all

Le . est un sélecteur de classes, voir https://www.w3schools.com/jsref/met_document_queryselector.asp

Answer 3

Vous devez utiliser le décorateur viewChild d'Angular pour accéder au domaine.

Fichier Html

<div class="form-group" >
                <label #labelRef class="name"  class="col-sm-2 control-label" [attr.for]="'skillName' + i">
                  {{ arr[i]}} {{ i }}
                </label>
              </div>

fichier component.ts

export class AppComponent implements AfterViewInit {
      @ViewChild('labelRef ', {static: false}) labelRef : ElementRef;

        ngAfterViewInit() {
        console.log(this.labelRef.nativeElement.innerHTML); 
        this.pRef.nativeElement.innerHTML = "DOM updated successfully!!!"; 
      }
    }

Answer 4

<h2 class="example">A heading with class="example"</h2>
<p class="example">A paragraph with class="example".</p>
<h2 class="example">A heading with class="example"</h2>
<p class="example">A paragraph with class="example".</p>
<h2 class="example">A heading with class="example"</h2>
<p class="example">A paragraph with class="example".</p>
<h2 class="example">A heading with class="example"</h2>
<p class="example">A paragraph with class="example".</p>
<h2 class="example">A heading with class="example"</h2>
<p class="example">A paragraph with class="example".</p>
<h2 class="example">A heading with class="example"</h2>
<p class="example">A paragraph with class="example".</p>
<h2 class="example">A heading with class="example"</h2>
<p class="example">A paragraph with class="example".</p>
<p>Click the button to add a background color to the first element in the document with class="example".</p>

<script>
    var els = document.getElementsByClassName("example");

    Array.prototype.forEach.call(els, function(el) {
        // Do stuff here
        el.style.backgroundColor = "red";
    });
</script>

Answer 5

Vous pouvez utiliser ViewChildren comme :

<div class="form-group" >
    <label class="name" #customLabel class="col-sm-2 control-label" [attr.for]="'skillName' + i">
        {{ arr[i]}} {{ i }}
    </label>
</div>

@ViewChildren('customLabel') labels: QueryList<ElementRef>

ngAfterViewInit() {
    this.labels.forEach((label) => {
        console.log(label);
        // do whatever you want
    });
}

Ici est la référence pour ViewChildren