Question

我试图使用角度4显示下表中每个字段数组的总数。例如，captiveInsPremiumPaid的总数需要显示在Premium paid附近。是否有一个内置的角度函数，让我直接在Html中做，或者我需要在组件中总计并将其绑定到html。无论哪种方式，你能告诉我如何去做它

我想要阅读的对象的定义如下

 export interface NpvResults  {

            captiveInsYear: number[];
            captiveInsPremiumPaid: number[];
            captiveInsTaxDeduction: number[];
            captiveInsLoanToParent: number[];
            captiveInsCapitalContribution: number[];
            captiveDividentDistribution: number[];
            captiveInsTerminalValue: number[];

        }

用于测试目的的组件中的硬编码值

 ngOnInit() {
        this.sourceResults = Object.assign({} as BackendDto.NpvResults) ;

        this.sourceResults.captiveInsYear = [1,2,3,4,5];
        this.sourceResults.captiveInsPremiumPaid = [-112000,568676,3343456,7676343,55656];
        this.sourceResults.captiveInsTaxDeduction = [44800,565656,347673,56565,34343];
        this.sourceResults.captiveInsLoanToParent = [0,3434,34346,5563,4545,343];
        this.sourceResults.captiveInsCapitalContribution = [0,347455,3435665,67676,34343];
        this.sourceResults.captiveDividentDistribution = [-2038328.6785651783,4545,4545,4545,56565];
        this.sourceResults.captiveInsTerminalValue = [0,5656,45454,23434,5656];

        }

html表位于

之下

<div class="tb-row d-flex flex-row">
     <div class="tb-cell col-md-7 col-sm-6 col-6"></div>
     <div class="tb-cell col-sm-6 col-md-5 col-6"><h6>Captive Option</h6></div>
 </div>
 <div class="tb-row d-flex flex-row">
     <div class="tb-cell col-md-7 col-sm-6 col-6">Premium Paid</div>
     <div class="tb-cell col-sm-6 col-md-5 col-6"> {{NpvResults?.captiveInsPremiumPaid|number:'.0-3'}} </div>
 </div> 
 <div class="tb-row d-flex flex-row">
    <div class="tb-cell col-md-7 col-sm-6 col-6">Tax Deduction</div>
    <div class="tb-cell col-sm-6 col-md-5 col-6"> {{NpvResults?.captiveInsTaxDeduction|number:'.0-3'}}</div>
</div>
 <div class="tb-row d-flex flex-row">
    <div class="tb-cell col-md-7 col-sm-6 col-6">Loan to Parent</div>
    <div class="tb-cell col-sm-6 col-md-5 col-6">{{NpvResults?.captiveInsLoanToParent|number:'.0-3'}}</div>
 </div> 
 <div class="tb-row d-flex flex-row">
    <div class="tb-cell col-md-7 col-sm-6 col-6">Capital Contribution/Distribution</div>
    <div class="tb-cell col-sm-6 col-md-5 col-6"> {{NpvResults?.captiveInsCapitalContribution|number:'.0-3'}} </div>
 </div>

Answer 1

您可以在html中使用.reduce来汇总数组中的值列表。

{{NpvResults?.captiveInsPremiumPaid.reduce(sum,0) | number:'.0-3'}}

然后在你的组件中：

public sum = (total, currentValue) => total + currentValue;

工作示例： https://plnkr.co/edit/cfyREeczoJ9UjFyDxkQv?p=preview

使用角度4显示表格中的总和

1 个答案: