Question

大家早上好，农历新年快乐，

我从事Angular的工作已经很久了，这里有些问题。这不是一个大问题，但是描述起来却是一个漫长的过程。我非常感谢您的帮助。这是我第一次实现 d3.js ，这是源http://learnjsdata.com/group_data.html的链接。

第一步：创建用户时，我将选择用户所属的团队以及他们的小时费率

添加用户

2nd：它将推动该团队花费数月的成本（这会将小时费率转换为月费率）。

每小时费用转换为每月费用

这是使用 d3.js

p / s：对于fetchNextMonth()和fetch2ndNextMonth()来说，逻辑仍然相同，因此我只复制此代码


 private  fetchCurrentMonth() {
    this.userService
      .getUsers(this.usersPerPage, this.currentPage)
      .subscribe(data => {
        const rateCurrentMonth = d3.nest<User, number>()
          .key((user: User) => user.team)
          .rollup((users: User[]) => {
            return d3.sum(users, (u: User) => {

             *//get rate with months that have 30 days* 

               if(u.hourlyRate &&  (this.getThirtyIndex() === 1)){
               return (u.hourlyRate * 8 * 22)
              }

            // get rate with months that have 31 days
               if (u.hourlyRate && (this.getThirtyOneIndex() === 1)){
                return (u.hourlyRate * 8 * 23)
              }  

            // convert annual rate to monthly rate
               if (u.annualRate){
              return u.annualRate / 12
            } 

             // calculate February
              return u.hourlyRate * 8 * 20
            });
          })
          .entries(data.users);
          console.log(this.rateCurrentMonth)
        this.rateCurrentMonth = rateCurrentMonth;
      });
  }

这是我在HTML上显示的表格

<table class="table table-striped">
  <thead>
    <tr>
      <th>Team Name</th>
      <th>Current Month Rate ({{getCurrentMonth()}}) </th>
      <th>Next Month Rate ({{getNextMonth()}})</th>
      <th>2nd Next Month Rate ({{get2ndNextMonth()}})</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor = "let rc of rateCurrentMonth">
      <th scope="row" >{{ rc.key }}</th>
      <td *ngFor="let rm of rateCurrentMonth" >{{rm.value  | currency }}</td>
      <td *ngFor="let rn of rateNextMonth">{{ rn.value | currency }}</td>
      <td *ngFor="let r2 of rate2ndNextMonth">{{ r2.value | currency}}</td>
    </tr>
    <tr>
      <th scope="row">Total</th>
      <td>{{ getCurrentMonthTotal() | currency }}</td>
      <td>{{ getNextMonthTotal()  | currency }}</td>
      <td>{{ get2ndNextMonthTotal()  | currency }}</td>
    </tr>
  </tbody>
</table>
<br />
<hr />

我的问题是因为每个月都有自己的月费率，因为30-31天之间的月份天数不同，所以我必须对每个*ngFor使用td，然后在d3上将其分组{key: "Sample 1", value: 5520}，因此key是team's name，而value是从每小时费率到每月费率的成本。有人可以帮我将数据正确显示在桌子上吗？如果我只添加了一个团队，它将正确显示，但如果超过1个，它将显示如下。费用是准确的。

表格显示

使用d3.ts和Angular在表中正确显示数据

0 个答案: