0
126
VistasFuente de datos de enlace angular desde la plantilla hasta el problema de la función
Tengo una tabla que obtiene datos para el menú desplegable de la función de archivo ts.
parte de html:
<ng-container matColumnDef="from"> <th mat-header-cell mat-sort-header *matHeaderCellDef>From</th> ... <form *ngIf="element.editable" [formGroup]="element"> <ng-select class="cell" appendTo="body" [items]="getEventDates(element, true)" etc.. </ng-container> <ng-container matColumnDef="until"> <th mat-header-cell mat-sort-header *matHeaderCellDef>Until</th> ... <form *ngIf="element.editable" [formGroup]="element"> <ng-select class="cell" appendTo="body" [items]="getEventDates(element, false)" etc... </ng-container>La función debería filtrar una vez los datos grandes para el elemento pasado y darle al menú desplegable:
getEventDates(element: MachineTrackHistoryFormGroup, isFromColumn: boolean | null): IMachineEventDateObject[] { console.log('getEventDates') return this.eventDates .filter(x => x.type == element.record.type && isFromColumn ? x.from <= element.record.output.from : x.from >= element.record.input?.from) } } Pero si abro un menú desplegable y lo desplazo, veo en la consola que, en lugar de 2 llamadas de getEventDates, hay cientos de llamadas.
¿Cuáles son las formas de resolver este problema? Solo quiero llamar una vez a la función getEventDates y obtener datos para el menú desplegable necesario, eso depende de un elemento pasado.
2 Respuestas
Responde la pregunta0
Ve cientos de registros de la consola porque el método getEventDates se ejecuta en cada ciclo de detección de cambios. Por lo general, se recomienda evitar los métodos de enlace en la plantilla. Lee esto .
En su lugar, puede crear una propiedad como eventDates , asignarle el valor calculado de getEventDates y vincularlo a ng-select ( [items] = eventDates ). Puede llamar a este método en el evento de cambio en ng-select .
0
Agregue una función getter que tenga un comportamiento calculado (solo se ejecuta si hay una actualización)
get filtredEventDates(){ return this.eventDates }Y filtre datos dentro de ngOnInit
ngOnInit(){ let selectedElement = ...; this.eventDates = this.getEventDates(selectedElement, true) }Plantilla Html en el sitio
[items]="filtredEventDates"