Question

我知道我应该避免在绑定中调用函数，因为在每个变更周期都会调用它们。我有以下问题想要避免函数调用，但找不到解决方法。

这只是一个简化的示例，但它应该显示问题：

some-template.html

<ng-container *ngFor="let control of group.Controls">
    <div [ngSwitch]="control.ControlTypeName" >
        <input *ngSwitchCase="'int'" type="text" [formControlName]="getFormControlName(control.PropertyName)">
        ...
    </div>
</ng-container>

some-component.ts

public getFormControlName(propertyName: string) {
    return this.someArray.find(x => x.key === propertyName).formControlName;
}

问题是我需要输入[formControlName]的属性不在我用*ngFor循环的'control'对象中。该属性位于另一个数组中，我只能通过调用一个函数来找到它。

有办法避免这种情况吗？

Answer 1

为避免这种情况，您应该有一个查询表（哈希表/地图/对象），该查询表由数组元素key索引，值formControlName：

some-component.ts

some_array = [{key: 'a', formControlName: 'b'}, ...];
control_name = this.some_array.reduce(
                   (obj, el) => ((obj[el.key] = el.formControlName), obj), {});

some-template.html

<input *ngSwitchCase="'int'" [formControlName]="control_name[control.PropertyName]" type="text">

避免绑定中的函数调用

1 个答案: