Избегайте вызова функции в привязке
Я знаю, что мне следует избегать вызовов функций в привязке, поскольку они вызываются при каждом цикле изменения. У меня следующая проблема, когда я хотел бы избежать вызова функции, но не могу найти способ ее обойти.
Это только упрощенный пример, но он должен показать проблему:
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. Свойство находится в другом массиве, и я могу найти его, только вызвав функцию.
Есть ли способ этого избежать?
Ответы 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">
Вы можете сохранить все вычисленные имена
formControlв отдельном объекте, например,formControls, идентифицированном ключомcontrol.ControlTypeName. Вероятно, вам следует сделать это внутри метода установкиgroup.Controls. Вы можете перенести функциональностьgetFormControlName()в его установщик. Таким образом, всякий раз, когда значениеgroup.controlsизменяется, он пересчитываетformControlNames, а затем в вашем шаблоне вы можете получить к нему доступ, как кformControls[control.ControlTypeName].