Angular binding data source from template to function issue-CodePudding

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
              
              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
                  
                  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.

CodePudding user response：

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.

CodePudding user response：

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"