是否建议在模板表达式中调用方法？答案

【问题标题】：Is it advisable to call a method in a template expression?是否建议在模板表达式中调用方法？
【发布时间】：2017-05-08 03:06:48
【问题描述】：

在 Angular 2 中是否建议在表达式中使用组件方法？例如，我有以下组件

  export class AreaComponent {

    totalLength: number;
    totalBreadth: number;
    totalheight: number;
    mylocalVar: number;

    totalSqft: number;

    myMethod(): number {
        let totalArea = this.totalLength * this.totalBreadth * this.totalheight;
        let myVar = 0;
        switch (this.mylocalVar) {
            case 0:
                myVar = 8;
                break;
            case 1:
                myVar = 9;
                break;
            case 2:
                myVar = 10;
                break;
        }

        this.totalSqft = totalArea * myVar ;

        return totalArea * myVar;
    }
}

我正在像这样显示area-component.html 中的值

<label>{{ myMethod() }}</label>

是否可以在表达式中调用组件方法？或者，如果我使用totalSqft 来显示计算

<label>{{ totalSqft }}</label>

这里的问题是如果totalSqft 是我如何调用myMethod() 而在以下表单元素totalLength、totalBreadth、totalheight、mylocalVar 上的值发生变化？

我正在使用模板驱动的方法。

在模板驱动方法中是否有任何替代解决方案可用于此场景？

【问题讨论】：

我不明白这部分“这里的问题是，当以下表单元素 totalLength、totalBreadth、totalheight、mylocalVar 的值发生变化时，totalSqft 是否是我调用 myMethod() 的方式？”你能详细说明一下吗？这与“模板驱动方法”有什么关系？
它可以只是一个吸气剂，get totalSqft()。另一种方法是对计算中使用的所有变量使用 observables。
@GünterZöchbauer 我想在表单元素 totalLength、totalBreadth、totalheight、mylocalVar 更新时调用 myMethod()。我如何在角度 2 中实现
制作totalLength、totalBreadth、totalheight、mylocalVar 设置器并在其中调用myMethod()。
@GünterZöchbauer 最后我用 (ngModelChange) 解决了表单值的问题，谢谢

标签： angular angular2-template angular2-forms

【解决方案1】：

不鼓励直接绑定到方法，因为它会导致一些问题。

每次 Angular2 运行更改检测时都会调用该方法。如果该方法执行一些计算密集型工作，这可能会使您的应用程序无响应。
如果该方法在连续调用中返回不同的结果（例如，每次调用都返回一个新的对象实例），则更改检测会引发错误，例如“检查后表达式已更改。

如果你知道这些陷阱并知道如何避免它们，你可以在绑定中使用方法，它们会很好地工作，但因为它很容易引起麻烦，所以在样式指南中不鼓励这样做。

实际上，我只是试图找到表明不鼓励但找不到的样式指南规则。

【讨论】：