是否可以对绑定到角度属性的值进行数学运算答案

【问题标题】：Is it possible to do math operation on value bound to property in angular是否可以对绑定到角度属性的值进行数学运算
【发布时间】：2019-12-27 12:56:57
【问题描述】：

我有一个接收我的模型的 Angular 组件。在我的模型中，我有一个评分，这个评分以 % 表示，介于 0 和 1 之间。

在我看来，我使用的是 ngb-rating，它允许我设置评级 + 最大值。

我需要显示这个值超过 6 星，所以我目前有这个：

<ngb-rating [(rate)]="topic.rating" [starTemplate]="t" [readonly]="true" max="6"></ngb-rating>

问题是我的值只在 0 和 1 之间变化，所以我应该能够让这个值在 0 和 6 之间。

我试过了，但它不起作用：

<ngb-rating [(rate)]="(topic.rating *6)" [starTemplate]="t" [readonly]="true" max="6"></ngb-rating>

我的主题只是一个界面，它是从服务器生成的，它不关心它应该如何显示。

我应该如何处理？

【问题讨论】：

【解决方案1】：

如果您使用“bannana sintax”，则不能使用函数或表达式-您是在告诉 Angular 可以更改“函数”-，因此您需要使用属性 [rate] 和 (rateChange) 来显示/更改变量的值

<ngb-rating [rate]="topic.rating*6" (rateChange)="topic.rating=$event/6"
       [starTemplate]="t" [readonly]="true" max="6"></ngb-rating>

注意：如果是 readOnly，则只能使用 [rate]

【讨论】：

【解决方案2】：

第一种方法您可以在函数中进行所有数学运算并在模板中调用它

<ngb-rating [(rate)]="rating" [starTemplate]="t" [readonly]="true" max="6"></ngb-rating>

您可以像这样在该函数中设置一个变量并在模板中使用该变量

getRating(rating) {
this.rating = rating *6;
}

第二种方法

查看 ngb-rating 之后我认为您应该只能在模板中使用 [rate]="topic.rating*6" 因为没有两种方式绑定，您不需要使用 [(rate)]

【讨论】：

从模板调用函数不是不好的做法吗？在每个更改检测周期调用该函数。
我刚试过，对我不起作用：ERROR Error: Uncaught (in promise): Error: Template parse errors: Parser Error: Unexpected token '=' at column 24 in [getRating(topic.rating)=$event] in ng:///HoroscopeModule/HoroscopeListComponent.html@5:41 (".name }}</h4> <p *ngFor="let topic of horoscope.topics"> {{topic.name}}: <ngb-rating [(rate)]="[ERROR ->]getRating(topic.rating)" [starTemplate]="t" [readonly]="true" max="6"></ngb-rating> </p>
而不是这个 'getRating(topic.rating)=$event'。您需要评估组件中函数中的表达式并返回结果。这将解决模板解析错误。虽然我不太喜欢从模板调用函数的想法
@user8351493，如果使用“bannana sintax”，则不能使用函数或表达式