时间戳

首页 > 解决方案 > Angular 11，如何对函数中的值进行数据绑定

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

问题描述

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

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>

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

标签： javascripthtmlangularfunctiondata-binding

解决方案

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

尝试以下

<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>

推荐阅读