Angular 将多个元素绑定到从函数返回的一个对象答案

【问题标题】：Angular Bind Multiple Elements to One Object Returned from FunctionAngular 将多个元素绑定到从函数返回的一个对象
【发布时间】：2020-03-28 10:13:44
【问题描述】：

我正在使用 Angular 7。我有一个列出建筑物的表格，其中每个建筑物都有几个美元值（例如个人财产、特殊设备等）。在表格页脚中，我想总结这些值。

负责的组件有一个包含多个组建筑物的输入属性，本质上是一个建筑物数组的数组，我想获取每个内部数组的总和。

这个组件是否有可能有一个函数，它接受 1 组建筑物并返回一个对象，其属性是各种总和，并将多个 DOM 元素绑定到该 1 个函数生成的对象？

我希望避免每次总和都遍历建筑物一次，并避免将计算值存储在组件中。类似于在 DOM 元素中“存储”对象的能力，类似于 *ngFor 中的 let？我只需要 1 路绑定。

类似这样的东西（由 ngVariable 组成）：

<tfoot ngVariable="sumBuildings(group) as sums">
    <td>{{ sums.persProp }}</td>
    <td>{{ sums.specEquip }}</td>
</tfoot>

如果没有这样的事情，我的下一个计划是构建一个内部组件来处理一组建筑物，并且可以在 init 上计算总数，然后我可以绑定到那个对象。但是 ngVariable 听起来更容易。

谢谢！

【问题讨论】：

【解决方案1】：

嗯，我不知道这是否是一个“合适的”解决方案，但它确实有效。 *ngIf 完全符合我的要求。我能写：

<tfoot *ngIf="sumBuildings(group) as sums">
    <td>{{ sums.persProp }}</td>
    <td>{{ sums.specEquip }}</td>
</tfoot>

我能够绑定到sums。因为我使用了副作用，所以感觉很脏，但它可以满足我的需要。

【讨论】：