我得到了一个必须显示的值列表，我使用两个元素进行数据处理，这是我的组件：
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.resports｝｝和｛{element.redracts｝的和，我尝试在我的组件中添加一个"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>
输出正是写入其中的字符串，而不是函数返回的值。我要做的事情的正确语法是什么？函数是否是必要的？
- 将函数绑定到属性并从插值中调用它们将在默认更改检测策略的情况下触发每个更改检测周期的函数。如果函数具有较高的开销，它可能会对性能产生影响
- 插值运算符内的语句是有效的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>
您需要将方法调用放入{{ }}中。
例如
{{ sum(element.announces, element.withdraws) }}
尝试以这种方式绑定sum方法{{sum(element.announces,element.withdraws)}}