Question

我试图通过循环遍历对象来填充表格。我能够打印标题，但不知道如何打印行值。

我正在尝试填充表格，如下面的屏幕截图所示

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

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

    }

获取用户在上一屏幕中输入的填充年数的服务方法。例如，用户可以输入5,6或2等。起始年份是当前年份，如果用户输入2，那么只有2018年和2019年应该显示在屏幕上。因此，该表将是动态的。

html表

<div class="col-lg-10 col-md-12">
       <p><span class="purple"></span>Captive</p>
       <table class="table">
              <thead>
                    <tr>
                         <th></th>
                         <th *ngFor= "let year of yearList"> {{year}}</th>
                         <th>Remaining Years</th>
                    </tr>
              </thead>
              <tbody>
                   <tr>
                      <td>Premium Paid</td>
                          <td>-30,339</td>
                          <td>-29,436</td>
                          <td>-28,559</td>
                          <td>-27,709</td>
                          <td>-26,884</td>
                          <td>0</td> 
                     </tr>
                     <tr>
                            <td>Tax Deduction</td>
                            <td>12,136</td>
                            <td>11,774</td>
                            <td>11,424</td>
                            <td>11,084</td>
                            <td>10,754</td>
                            <td>0</td>

                      </tr>
                      <tr>
                          <td>Loan to Parent</td>
                          <td>0</td>
                          <td>0</td>
                          <td>0</td>
                          <td>0</td>
                          <td>0</td>
                          <td>0</td>
                          <td>0</td>
                          <td>0</td>
                      </tr>
                      <tr>
                          <td>Capital Contribution/Distribution</td>
                          <td>-2,500</td>
                          <td>0</td>
                          <td>0</td>
                          <td>0</td>
                          <td>0</td>
                          <td>0</td>

                     </tr>
                     <tr>
                          <td>Dividened Distribution</td>
                          <td>na</td>
                          <td>0</td>
                          <td>0</td>
                          <td>0</td>
                          <td>0</td>
                          <td>0</td>

                    </tr>
                     <tr>
                         <td>Terminal Value</td>
                         <td>na</td>
                         <td>0</td>
                         <td>0</td>
                         <td>0</td>
                         <td>0</td>
                         <td>9,997</td>

                   </tr>                                            
         </tbody>
     </table>
 </div>

Answer 1

刚

<td *ngFor="let item in sourceResults.captiveInsYear>{{2015+item}}</td>
<td *ngFor="let item in sourceResults.captiveInsPremiumPaid >{{item}}</td>
...

根据对象数据填充动态表

1 个答案: