Javascript 在td中使用多个阵列显示特定数据，使用角度

在将d3.js应用到代码中之后，我有一个带有key和value的数组，当结果出来时，它有key和value对。因此，我将每个团队分配给键和值的成本。在控制台日志中看起来是这样的

Console.log中的键和值

Rate for current month [{"key":"Sample 1","value":6400},{"key":"Sample 2","value":3200}]
Rate for next month [{"key":"Sample 1","value":7360},{"key":"Sample 2","value":3680}]
Rate for 2nd next Month [{"key":"Sample 1","value":7040},{"key":"Sample 2","value":3520}]

• 所以我的问题是我必须使用3个不同的数组来显示ngFor的值。我想把这些值放在正确的位置。以下是代码和表格在浏览器上的显示

队名
当月汇率（{{getCurrentMonth（）}}）
下月费率（{{getNextMonth（）}}）
下个月第二次费率（{{get2ndNextMonth（）}}）
{{rc.key}}
{{rc.value}货币}
{{nm.value | currency}
{{nn.value | currency}
全部的
{{getCurrentMonthTotal（）| currency}
{{getNextMonthTotal（）| currency}}
{{get2ndNextMonthTotal（）| currency}

表格显示

• 这是TS文件

从'@angular/core'导入{Component，Inject，OnInit}；
从“../../services/user.service”导入{UserService}；
从“d3”导入*作为d3；
从“../../models/User.model”导入{User}；
@组成部分({
选择器：“应用程序费率成本”，
templateUrl:“./ratecost.component.html”，
样式URL:['./ratecost.component.css']
})
导出类RatecostComponent实现OnInit{
下个月费率=[]；
费率2ndnextmonth=[]；
rateCurrentMonth=[]；
sumCurrentMonth=0；
sumYear=0
月份=[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”，
“八月”、“九月”、“十月”、“十一月”、“十二月”]；
d=新日期（）；
三十一=[0,2,4,6,7,9,11]
三十=[3,5,8,10]
feb=[1]；
建造师(
私有用户服务：用户服务，
) {
}
恩戈尼尼特（）{
this.fetchCurrentMonth（）；
this.fetchNextMonth（）；
this.fetch2ndNextMonth（）
}
//获取当前月份的键和值
//当月费率
//输出：{键：“样本1”，值：6400}{键：“样本2”，值：3200}
私有fetchCurrentMonth（）{
这个是.userService
.getUsers（0,0）
.订阅（数据=>{
const rateCurrentMonth=d3.nest（）
.key（（用户：用户）=>user.team）
.rollup（（用户：用户[]）=>{
返回d3.sum（用户，（u:User）=>{
if（u.hourlyRate&（this.three.indexOf（this.d.getMonth（））==1））{
返回（u.hourlyRate*8*22）
}
if（u.hourlyRate&（this.thirtyOne.indexOf（this.d.getMonth（））==1））{
返回（u.hourlyRate*8*23）
}如果（美国年利率）{
返回美国年利率/12
}
返回u.hourlyRate*8*20
});
})
.条目（数据用户）；
this.rateCurrentMonth=rateCurrentMonth；
console.log（'当前月费率'，当前月费率）
});
}
//获取下个月的密钥和值
//下个月费率[]
//输出：{键：“样本1”，值：7360}{键：“样本2”，值：3680}
私有fetchNextMonth（）{
这个是.userService
.getUsers（0,0）
.订阅（数据=>{
const rateNextMonth=d3.nest（）
.key（（用户：用户）=>user.team）
.rollup（（用户：用户[]）=>{
返回d3.sum（用户，（u:User）=>{
if（u.hourlyRate&（this.three.indexOf（this.d.getMonth（）+1）==1））{
返回（u.hourlyRate*8*22）
}
if（u.hourlyRate&（this.thirtyOne.indexOf（this.d.getMonth（）+1）==1））{
返回（u.hourlyRate*8*23）
}如果（美国年利率）{
返回美国年利率/12
}
返回u.hourlyRate*8*20
});
})
.条目（数据用户）；
this.rateNextMonth=rateNextMonth
console.log（'下月费率'，下月费率）
});
}
//获取下个月第2次的密钥和值
//数组的速率为2ndnextmonth=[]
//输出：{键：“样本1”，值：7040}{键：“样本2”，值：3520}
私有fetch2ndNextMonth（）{
这个是.userService
.getUsers（0,0）
.订阅（数据=>{
const rate2ndNextMonth=d3.nest（）
.key（（用户：用户）=>user.team）
.rollup（（用户：用户[]）=>{
返回d3.sum（用户，（u:User）=>{
if（u.hourlyRate&&（this.getThirtyIndex（）+2）==1）{
返回（u.hourlyRate*8*22）
}
else if（u.hourlyRate&&（this.getThirtyOneIndex（）+2）==1）{
返回（u.hourlyRate*8*23）
}其他条件（美国年利率）{
返回美国年利率/12
}
返回u.hourlyRate*8*20
});
})
.条目（数据用户）；
this.rate2ndNextMonth=rate2ndNextMonth；
console.log（'下个月第2次费率'，下个月第2次费率）
});
}
//获取当前月份的总数
getCurrentMonthTotal（）{
返回此.rateCurrentMonth.map（t=>t.value）
.减少（（acc，值）=>acc+值，0）
}
//得到下个月的总数
getNextMonthTotal（）{
返回此.rateNextMonth.map（t=>t.value）
.减少（（acc，值）=>acc+值，0）
}
//得到下个月第二次的总数
get2ndNextMonthTotal（）{
返回此.rate2ndNextMonth.map（t=>t.value）
.减少（（acc，值）=>acc+值，0）
}
//在表上显示当前月份
getCurrentMonth（m）{
m=this.months[this.d.getMonth（）]；
返回m；
}
//下个月在桌子上展示
getNextMonth（n）{
n=本月[（本d.getMonth（）+1）]；
返回n；
}
//在表上显示下个月的第2个
get2ndNextMonth（nn）{
nn=本月[（本月第四天获取月数（）+2）]；
返回nn；
}
getThirtyIndex（）{
返回此.three.indexOf（this.d.getMonth（））
}
getThirtyOneIndex（）{
归还这个
<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 >{{rc.value | currency }}</td>
      <td *ngFor = "let nm of rateNextMonth">{{nm.value  | currency }}</td>
      <td *ngFor = "let nn of rate2ndNextMonth">{{ nn.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 />

import {Component, Inject, OnInit} from '@angular/core';
import {UserService} from '../../services/user.service';
import * as d3 from 'd3';
import {User} from '../../models/user.model';


@Component({
  selector: 'app-ratecost',
  templateUrl: './ratecost.component.html',
  styleUrls: ['./ratecost.component.css']
})
export class RatecostComponent implements OnInit {
  rateNextMonth = [];
  rate2ndNextMonth = [];
  rateCurrentMonth = [];

    sumCurrentMonth = 0;
    sumYear = 0


   months = ["January", "February", "March", "April", "May", "June", "July",
  "August", "September", "October", "November", "December"];
  d = new Date();

  thirtyOne = [0,2,4,6,7,9,11]
  thirty = [3,5,8,10]
  feb = [1];


  constructor(
    private userService: UserService,
  ) {
  }

  ngOnInit() {
    this.fetchCurrentMonth();
    this.fetchNextMonth();
    this.fetch2ndNextMonth()
  }
// get the Key and Value for the current Month
// rateCurrentMonth
// OutPut: {key: "Sample 1", value: 6400} {key: "Sample2", value: 3200}
 private  fetchCurrentMonth() {
    this.userService
      .getUsers(0,0)
      .subscribe(data => {
        const rateCurrentMonth = d3.nest<User, number>()
          .key((user: User) => user.team)
          .rollup((users: User[]) => {
            return d3.sum(users, (u: User) => {
              if(u.hourlyRate &&  ( this.thirty.indexOf(this.d.getMonth()) === 1)){
               return (u.hourlyRate * 8 * 22)
              }
               if (u.hourlyRate && (this.thirtyOne.indexOf(this.d.getMonth()) === 1)){
                return (u.hourlyRate * 8 * 23)
              }  if (u.annualRate){
              return u.annualRate / 12
            }
              return u.hourlyRate * 8 * 20
            });
          })
          .entries(data.users);
        this.rateCurrentMonth = rateCurrentMonth;
        console.log('rate for current month', rateCurrentMonth)
      });
  }


// get the Key and Value for the next Month
// rateNextMonth[]
// OutPut: {key: "Sample 1", value: 7360} {key: "Sample2", value: 3680}
   private  fetchNextMonth() {
    this.userService
      .getUsers(0,0)
      .subscribe(data => {
        const rateNextMonth = d3.nest<User, number>()
          .key((user: User) => user.team)
          .rollup((users: User[]) => {
            return d3.sum(users, (u: User) => {
              if(u.hourlyRate &&  ( this.thirty.indexOf(this.d.getMonth() + 1) === 1)){
               return (u.hourlyRate * 8 * 22)
              }
               if (u.hourlyRate && (this.thirtyOne.indexOf(this.d.getMonth() + 1) === 1)){
                return (u.hourlyRate * 8 * 23)
              }  if (u.annualRate){
              return u.annualRate / 12
            }
              return u.hourlyRate * 8 * 20
            });
          })
          .entries(data.users);
        this.rateNextMonth = rateNextMonth
        console.log('rate for next month',rateNextMonth)
      });
  }

 // get the Key and Value for the 2nd next Month
//  array is rate2ndNextMonth = []
// OutPut: {key: "Sample 1", value: 7040} {key: "Sample2", value: 3520}
 private fetch2ndNextMonth() {
    this.userService
      .getUsers(0,0)
      .subscribe(data => {
        const rate2ndNextMonth = d3.nest<User, number>()
          .key((user: User) => user.team)
          .rollup((users: User[]) => {
            return d3.sum(users, (u: User) => {
              if(u.hourlyRate &&  (this.getThirtyIndex() + 2) === 1){
               return (u.hourlyRate * 8 * 22)
              }
              else if (u.hourlyRate && (this.getThirtyOneIndex() + 2) === 1){
                return (u.hourlyRate * 8 * 23)
              } else if (u.annualRate){
              return u.annualRate / 12
            }
              return u.hourlyRate * 8 * 20
            });
          })
          .entries(data.users);
        this.rate2ndNextMonth = rate2ndNextMonth;
        console.log('Rate for 2nd next Month', rate2ndNextMonth)
      });
  }

//   get the total of current Month
getCurrentMonthTotal() {
  return this.rateCurrentMonth.map(t => t.value)
  .reduce((acc, value) => acc + value, 0)
}

// get the total of Next Month
getNextMonthTotal() {
    return this.rateNextMonth.map(t => t.value)
    .reduce((acc, value) => acc + value, 0)
  }

//   get the total of 2nd Next Month
  get2ndNextMonthTotal() {
    return this.rate2ndNextMonth.map(t => t.value)
    .reduce((acc, value) => acc + value, 0)
  }

// display current month on table
getCurrentMonth(m){
  m = this.months[this.d.getMonth()];
  return m;
}

// display next month on table
getNextMonth(n){
  n = this.months[(this.d.getMonth() + 1)];
  return n;
}

// display 2nd next month on table
get2ndNextMonth(nn){
  nn = this.months[(this.d.getMonth() + 2)];
  return nn;
}


getThirtyIndex(){
  return this.thirty.indexOf(this.d.getMonth()) 
}


getThirtyOneIndex(){
  return this.thirtyOne.indexOf(this.d.getMonth())
}
}