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

Posted 2023-02-23

【中文标题】从模板到函数问题的角度绑定数据源

【英文标题】：Angular binding data source from template to function issue

【发布时间】：2022-01-21 09:20:51

【问题描述】：

我有一个表格，可以从 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 函数并获取所需下拉列表的数据，这取决于传递的元素。

【参考方案1】：

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

相反，您可以创建一个类似eventDates 的属性，为其分配来自getEventDates 的计算值，并将其绑定到ng-select ([items] = eventDates)。 您可以在ng-select 上的更改事件上调用此方法。

【参考方案2】：

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

get filtredEventDates()
 return this.eventDates

并在 ngOnInit 中过滤数据

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

Insite Html 模板

          [items]="filtredEventDates"

【讨论】：

不可能在 ngOnInit 中计算它，因为该函数应该返回表中不同元素的过滤元素，这取决于用户（他可以选择编辑表中的任何元素）

尝试对所选元素使用全局变量及其状态是否已编辑。