0

se me hace complicado hacer los querySelectorAll y traté de implementar JQuery

El siguiente código es el HTML del componente

<tbody>
    <tr *ngFor="let key of Keys" id="key">
        <td width="40"><input type="checkbox" class="form-control" name="" id=""></td>
        <td width="130">{{key.line + key.code}}</td>
        <td width="250">
            <div class="input-group">
                <span name="images">
                    <div class="case">[<i class="fas fa-circle"></i>]</div>
                </span>
                <select class="form-control" id="selectColor" name="op1">
                    <option class="white"></option>
                    <option class="white">0</option>
                    <option class="gray">1</option>
                    <option class="brown">2</option>
                    <option class="blue">3</option>
                    <option class="purple">4</option>
                    <option class="green">5</option>
                </select>
                <select class="form-control" id="selectColor" name="op2">
                    <option class="white"></option>
                    <option class="white">0</option>
                    <option class="gray">1</option>
                    <option class="brown">2</option>
                    <option class="blue">3</option>
                    <option class="purple">4</option>
                    <option class="green">5</option>
                </select>
                <select class="form-control" id="selectColor" name="op3">
                    <option class="white"></option>
                    <option class="white">0</option>
                    <option class="gray">1</option>
                    <option class="brown">2</option>
                    <option class="blue">3</option>
                    <option class="purple">4</option>
                    <option class="green">5</option>
                </select>
            </div>
        </td>
        <td>{{key.desc}}</td>
    </tr>
</tbody>

Y trataba de hacer uso de Jquery en los Select y varias cosas en general, este es el código de los select

Declaré el numeral y query

declare const $: any;
declare const jQuery: any;

Y también el código de Jquery

public selectC(): void {
  let select = $("[id=selectColor]");
  for (let i = 0; i < select.length; i++) {
    $(select[i]).change(function () {
      var color = $("option:selected", this).attr("class");
      $(select[i]).attr("class", color).addClass("form-control");
    });
  }
}

Pero dejó de funcionar cuando lo metí en el ngFor

Ayuda :c

También creo que se puede hacer con una llamada de tipo ViewChild

@ViewChild('tbody') tbody: ElementRef;

Pero no quiere aunque lo ponga como parte del Jquery :c

O bueno ¿cómo puedo seleccionar elementos HTML con Angular y darles evento? :c

2
  • En qué momento llamas la función selectC()?
    – Lobos
    el 19 mar. 2020 a las 0:26
  • Pues lo intenté con ngAfterViewInit() y ngOnInit() y nada @crrlos :c el 19 mar. 2020 a las 0:29

1 respuesta 1

0

Agrega un parámetro al método selectC() y dentro del método evalúa con un if ese parámetro:

public selectC(ultimo): void {
  if(ultimo){
    let select = $("[id=selectColor]");
    for (let i = 0; i < select.length; i++) {
     $(select[i]).change(function () {
        var color = $("option:selected", this).attr("class");
        $(select[i]).attr("class", color).addClass("form-control");
      });
    }
  }
}

Modifica el ngfor para que se vea así:

<tr *ngFor="let key of Keys;let ultimo = last" id="key">

 <!-- resto del código removido por simplicidad -->

 {{selectC(ultimo)}}
 </tr>

antes del </tr> de cierre agrega el código {{selectC(ultimo)}}

Explicación:

Los elementos html deben existir antes de que puedan ser llamados con javascript. Por eso si llamas la función selectC() antes de que estén listos los elementos no funcionará. La solución que propuse llama a selectC() por cada iteración del ngFor pero se le pasa un parámetro para indicarle si ya es la última iteración, de esa forma se garantiza que todos los elementos html han sido creados y pueden ser llamados con js.

Actualización:

Otra forma sería llamar selectC() en el ngAfterViewInit()

ngAfterViewInit(){
 this.selectC();
}

Debería funcionar y no tienes que modificar el código del selectC() ni el ngFor

7
  • :o funciona pero ¿cómo? ¿si necesito hacer mas peticiones dentro de este for tienen que ser siempre al final? Muchas gracias por tu tiempo el 19 mar. 2020 a las 0:56
  • last regresa si es el último, ósea que se hará cuando sea la última, ¿En el oninit lo hace al iniciar y necesita hacerlo una vez cargue todo? el 19 mar. 2020 a las 1:01
  • Agregué la explicación en la respuesta.
    – Lobos
    el 19 mar. 2020 a las 1:07
  • 1
    Estaba viendo que haciendo esto, se repite dos veces la misma acción. Puse una variable Booleana que se setea true la primera vez que entra el 19 mar. 2020 a las 1:27
  • 1
    Pienso lo mismo también de la variable booleana, no se me ocurre algo diferente.
    – Lobos
    el 19 mar. 2020 a las 2:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.