Angular 11，如何对函数中的值进行数据绑定答案

【问题标题】：Angular 11, how to data-bind a value from a functionAngular 11，如何对函数中的值进行数据绑定
【发布时间】：2021-07-03 06:47:03
【问题描述】：

我有一个必须显示的值列表，我正在使用两个元素进行数据记录，这是我的组件：

export class HomeComponent implements OnInit {
  element!: HomeData;
  element2!: HomeData2;
  /*elements = elements;*/
  constructor(private homeService: HomeService,
              public dialog: MatDialog) {
   }

  ngOnInit(): void {
    this.homeService.getData().subscribe((data: HomeData) => {this.element = data; });
    this.homeService.getData2().subscribe((data2: HomeData2) => {this.element2 = data2; });
  }

这是我的 html 文档

<ul>
  <li>Total number of Sequences: <b>{{element.sequences}}</b></li>
    <li><a href="#"></a>Distinct Prefixes involved in Sequences: <b>{{element.prefixes}}</b></li>
    <li><a href="#"></a>BGP Updates involved in Sequences: <b></b> (Announces: <b>{{element.announces}}</b>, Withdrawals: <b>{{element.withdraws}}</b>)</li>
    <li><a href="#"></a>Total number of BGP Updates collected by RRC00 in 2019: <b>{{element2.updates}}</b> (Announces: <b>{{element2.announces}}</b>, Withdraws: <b>{{element2.withdraws}}</b>)</li>
    <li><a href="#"></a>Percentage of BGP Updates belonging to Sequences: /// (Announces: ///, Withdrawals: ///)</li>
    <li><a href="#"></a>Distinct Collector Peers (CPs) that observed at least a Sequences: <b>{{element.cPs}}</b></li>
    <li><a href="#"></a>Distinct ASes originating the prefixes involved in the Sequences: <b>{{element.aSes}}</b></li>
    <li><a href="#"></a>Number of AB-BA Sequences (whose AS-path contains pattern xAyBz and x'By'Az'): <b>{{element.containingLoops}}</b></li>
    <li><a href="#"></a>Sequences that are originated by an IPv4 Prefix: <b>{{element.prefixv4}}</b></li>
    <li><a href="#"></a>Sequences that are originated by an IPv6 Prefix: <b>{{element.prefixv6}}</b></li>
    <li><a href="#"></a>Sequences whose prefix is announced by more than one AS: <b>{{element.moreThanOneAsOrigin}}</b></li>
    <li><a href="#"></a>Sequences that contain at least one announcement with the BGP Path Attribute Aggregator set: <b>{{element.containsAggregator}}</b></li>
    <li><a href="#"></a>Sequences that contain at least two announcement with different values of the BGP Path Attribute Aggregator: <b>{{element.aggregatorChanges}}</b></li>
    <li><a href="#"></a>Sequences originated by a known beacon prefix: <b>{{element.beaconSequences}}</b></li>
    <li><a href="#"></a>BGP Updates originated by a known beacon prefix: <b>{{element.beaconAnnouncements + element.beaconWithdrawals}}</b> (Announcements: {{element.beaconAnnouncements}}, Withdrawals: {{element.beaconWithdrawals}})</li>
    <li><a href="#"></a>Percentage of BGP Updates originated by a known beacon prefix: /// (Announcements: ///, Withdrawals: ///)</li>
</ul>

一切正常，但我必须显示的值之一是 {{element.announces}} 和 {{element.withdraws}} 的总和，我尝试在我的组件中添加一个“sum”函数，然后调用它在我的 html 文档中是这样的：

<li><a href="#"></a>BGP Updates involved in Sequences: <b>'sum({{element.announces}}, {{element.withdraws}})'</b> (Announces: <b>{{element.announces}}</b>, Withdrawals: <b>{{element.withdraws}}</b>)</li>

输出正是写在那里的字符串，而不是函数返回的值。我正在尝试做的事情的正确语法是什么，甚至需要一个函数吗？

【问题讨论】：

标签： javascript html angular function data-binding

【解决方案1】：

在默认更改检测策略的情况下，将函数绑定到属性并从插值中调用它们将触发每个更改检测周期的函数。如果函数开销较大，可能会对性能产生影响。
插值运算符中的语句是有效的 TS 表达式。因此，您可以在插值中使用 + 进行简单的求和。您还可以在变量前面加上 + 以将它们转换为数字。

试试下面的

<li>
  <a href="#"></a>
  BGP Updates involved in Sequences: <b>{{ +element.announces + +element.withdraws }}</b> 
  (Announces: <b>{{ element.announces }}</b>, Withdrawals: <b>{{ element.withdraws }}</b>)
</li>

【讨论】：

【解决方案2】：

你需要把你的方法调用放在{{ }}中。

例如

{{ sum(element.announces, element.withdraws) }}

【讨论】：

【解决方案3】：

尝试这样绑定sum方法{{sum(element.announces,element.withdraws)}}

【讨论】：