0
125
ViewsAngular binding data source from template to function issue
I have a table, that get data for dropdown from ts file function.
part of 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>
The function should once filter large data for passed element and give it to dropdown:
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)
}
}
But if I open a dropdown and scroll it I see in the console, that instead of 2 calls of getEventDates, there are hundreds of calls of it.
What are the ways to resolve this issue? I want just once to call getEventDates function and get data for the needed dropdown, that depends on a passed element.
2 answers
Answer question0
You see hundreds of console logs because the method getEventDates gets executed on every change detection cycle. It's usually recommended to avoid binding methods in the template. Read this.
Instead you can create a property like eventDates, assign it the calculated value from getEventDates, and bind it to ng-select ([items] = eventDates).
You can call this method on the change event on ng-select.
0
Add a getter function that has computed behavior (only executed if there is an update)
get filtredEventDates(){
return this.eventDates
}
And filter data inside ngOnInit
ngOnInit(){
let selectedElement = ...;
this.eventDates = this.getEventDates(selectedElement, true)
}
Insite Html template
[items]="filtredEventDates"