0

HTML:

<input #inputCodigo type="text" (keyup)="searchProductoBarCode($event)">
  </div>
</article>
<article *ngIf="proforma && proforma.productos.length">
  <table #tableDispatch tabindex="-1" [attr.role]="role-table" appScrolling [data]="productosDespachados"
         (selected)="productoSelected=$event">
    <thead>
    <tr>
      <th>Código</th>
      <th>Producto</th>
      <th>Cantidad</th>
      <th>Fracción</th>
      <th>P.unitario</th>
      <th>P.total</th>
      <th>Stock</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let p of productosDespachados; let i=index" [class.selected]="onSelected(p,i)">
      <td>{{ p.prod_codigo }}</td>
      <td>{{ p.prod_descripcion }}</td>
      <td><input type="text" (keyup)="onKeyDownInput($event,i)" #inputsCantidad></td>
      <td>{{ p.prec_vta_final }}</td>
      <td>{{ getPrecioFinalv2() }}</td>
      <td>{{ p.prod_stock_cantidad }}</td>
    </tr>
    </tbody>
  </table>

Función onSelected(), se repite múltiples veces sin parar, y hace lenta mi aplicación, la función onSelected(), devuelve true o false según sea el caso:

onSelected(producto, index) {
const result = Object.is(producto, this.productoSelected);
if (result) {
  this.inputsFraccion.toArray()[index].nativeElement.focus();
  }
    return Object.is(producto, this.productoSelected);
}
5
  • Podrías explicar un poco más que quieres hacer? Así te puedo dar una mejor respuesta el 15 ene. 2018 a las 20:51
  • la funcion onSelected, siempre se ejecuta, te muestro una imagen: ibb.co/gCDjgm el 15 ene. 2018 a las 21:04
  • Si, lo entiendo y también entiendo porque pasa. Te consulto bien que deseas hacer para darte una mejor respuesta, ya que hay otros errores conceptuales también. el 15 ene. 2018 a las 21:07
  • A bueno, simplemente que cuando ese objeto sea seleccionado, en ese mismo instante, se haga focus al input que esta en ese <td><input type="text" (keyup)="onKeyDownInput($event,i)" #inputsCantidad></td> el 15 ene. 2018 a las 21:09
  • El problema es que cuando hago eso, a cada rato se ejecuta el focus. Y no deja hacer focus en otro lado. Acotar que el sistema que estoy realizando es sin mouse, por eso siempre uso el teclado para todas las interacciones. el 15 ene. 2018 a las 21:11

1 respuesta 1

1

Explicación

Esto te sucede porque:

[class.xxx] ( lo mismo ocurre con [style.xxx.yy])son sintaxis especial de Angular donde:

[class.my-class]="expresión"

Agrega (o quita) la clase de CSS "my-class" a (o desde) el elemento dependiendo de si los resultados de la expresión son true o false.

Problema:

Lo que sucede es que cuando pones una función en esa expresión, se ejecuta reiteradas veces para comprobar si cambio ( en el mismo siclo que ngOnChange() ). Para solucionar esto, asigna una variable booleana la cual tu manejas, entonces en cada ejecución de ngOnChange() solo comprobara si cambio el valor de dicha variable.

Solución:

(alternativa a onSelected(p,i) y recomendación)

(selected)="productoSelected=$event" No es una buen practica, ya que te puede dar problemas al momento del build --prod, te recomiendo realizar una función que reciba $event y asigne su valor y aquí mismo podrías agregar el focus para tu input, con algo como lo siguiente:

const index = productosDespachados.indexOf(productoSelected);
this.inputsFraccion.toArray()[index].nativeElement.focus();
3
  • Muchas gracias Federico, funciono!!! el 15 ene. 2018 a las 22:14
  • Para complementar, mi funcion quedo asi: ` code` onScrolling(productoSelected) { const index = this.productosDespachados.indexOf(productoSelected); if (this.inputsFraccion.toArray()[index]) { this.productoSelected = productoSelected; this.inputsFraccion.toArray()[index].nativeElement.focus(); } } el 15 ene. 2018 a las 22:17
  • De nada, recuerda votar la pregunta si te funciono, te aporto conocimiento y te pareció correcta. Saludos. el 16 ene. 2018 a las 2:03

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.