0

Estoy creando una interfaz, y necesito que un dropdown sea dinamico, en la documentacion de PrimeNG, los ejemplos asumen que los valores de la variable para el atributo [option] se obtienen una vez (al ejecutarse en la carga de la pagina), pero yo quiero que sea dinamico y los valores sean retornado desde un metodo:

component.html

<p-dataView #dv [value]="listaPrincipal">
    <ng-template let-principal pTemplate="listItem">
        ...
        <p-dropdown [options]="obtenerDatos()"  [showClear]="true" placeholder="Seleccionar"></p-dropdown>
        ...
    </ng-template>
</p-dataView>

component.ts

@Component({
    selector: 'prueba-app',
    templateUrl: './component.html',
    providers: [
        ...
    ]
})
export class PruebaComponent implements OnInit{
    ngOnInit(): void {
        ...
    }

    obtenerDatos() {

        console.log("test");
    
        return [] //eliminé el metodo que devuelve los datos porque se estaba llamando esta funcion infinitamente
    
    }

Si ejecuto esto en la consola del navegador se imprime infinitamente "test"

introducir la descripción de la imagen aquí

Yo quiero que ese metodo se ejecute una sola vez. Como puedo lograr eso?

9
  • Quieres que se ejecute en cada iteración y al mismo tiempo quieres que se ejecute una sola vez. Eso no es posible.
    – Lobos
    Commented el 20 oct. 2023 a las 19:16
  • @Lobos, no hermano, en cada iteracion el metodo se tiene que ejecutar una vez, pero en cada iteracion se ejecuta muchas veces, de hecho esa imagen es resultado de una iteracion y el metodo ejecutandose mas de una vez en una iteracion Commented el 23 oct. 2023 a las 15:54
  • Entiendo. ¿La función obtenerDatos retorna datos diferentes en cada ejecución? Porque en el ejemplo siempre retornaría lo mismo.
    – Lobos
    Commented el 23 oct. 2023 a las 16:30
  • @Lobos, es que yo le puse un console.log("test"), solo para enfatizar que se esta ejecutando la funcion varias veces por alguna razon (no por la iteracion) Commented el 23 oct. 2023 a las 16:37
  • Pues la razón por la que se ejecuta tantas veces es por la detección de cambios que hace Angular. Cuando ocurre un evento Angular analiza la plantilla y compara los datos con el modelo, si hay cambios entonces actualiza la plantilla para reflejar el nuevo valor. El problema con la función es que Angular no puede saber su valor sin antes ejecutarla, así que hace eso varias veces debido a la detección de cambios.
    – Lobos
    Commented el 23 oct. 2023 a las 16:48

1 respuesta 1

0

Puedes usar un array en lugar de la función obtenerDatos en la propiedad [options]

component.html

<p-dataView #dv [value]="listaPrincipal">
    <ng-template let-principal pTemplate="listItem">
        ...
        <p-dropdown [options]="dropdownOptions"  [showClear]="true" placeholder="Seleccionar" optionLabel="name"></p-dropdown>
        ...
    </ng-template>
</p-dataView>

component.ts

@Component({
    selector: 'prueba-app',
    templateUrl: './component.html',
    providers: [
        ...
    ]
})
export class PruebaComponent implements OnInit{

    dropdownOptions: any[];

    ngOnInit(): void {
        this.obtenerDatos();
    }

    obtenerDatos() {
        this.dropdownOptions = [{ value: 1, name: 'hello' }];
   }
}
1
  • Es que justamente eso es lo que no tengo que hacer, porque asi como me lo has planteado la ejecución del metodo "obtenerDatos()" se hace una vez, pero yo no necesito que se ejecute una vez, sino en cada iteracion del dataview Commented el 19 oct. 2023 a las 20:31

Tu Respuesta

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

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