Angular 从模板到函数的绑定数据源问题

Question

我有一个 table，它从 ts 文件函数中获取下拉列表的数据。
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>

该函数应该为传递的元素过滤一次大数据并将其提供给下拉列表：


  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)
    }
  }

但是，如果我打开一个下拉菜单并滚动它，我会在控制台中看到，不是调用 2 次 getEventDates，而是调用了数百次。
解决这个问题的方法有哪些？我只想调用一次 getEventDates 函数并获取所需下拉列表的数据，这取决于传递的元素。

Answer 1

添加一个 getter 具有计算行为的函数（仅在有更新时执行）

get filtredEventDates(){
 return this.eventDates
}

并在 ngOnInit 中过滤数据

ngOnInit(){
let selectedElement = ...;
this.eventDates = this.getEventDates(selectedElement, true)
}

站内Html模板

          [items]="filtredEventDates"

Answer 2

您会看到数百个控制台日志，因为方法 getEventDates 在每个更改检测周期都会执行。通常建议避免在模板中绑定方法。阅读 this.

相反，您可以创建一个属性，如 eventDates，将 getEventDates 的计算值分配给它，并将其绑定到 ng-select（[items] = eventDates). 您可以在 ng-select.

上的更改事件上调用此方法

Angular 从模板到函数的绑定数据源问题

Angular binding data source from template to function issue

binding

angular