如何用 AngularJs 对对象数组中的属性求和

Question

所以我从 nodejs api 到我的 angular 应用程序得到了结果的数组，它看起来像这样


    [
      {
        "session": "2019/2020",
        "harmattan": [
          {
            "course_code": "CSC104",
            "title": "Object Oriented Programming",
            "unit": 2,
            "status": "C",
            "result": {
              "updatedAt": "2020-12-04T11:11:54.557Z",
              "_id": "5fca1a8daac49e44a40a80e6",
              "matric_no": "U19CYS1076",
              "ca": 3,
              "exam": 48,
              "total": 51,
              "point": 3,
              "grade": "C"
            }
          },
          {
            "course_code": "CSC105",
            "title": "Problem Solving",
            "unit": 3,
            "status": "R",
            "result": {
              "updatedAt": "2020-12-04T11:11:54.557Z",
              "_id": "5fca1aaaaac49e44a40a8105",
              "matric_no": "U19CYS1076",
              "ca": 3,
              "exam": 48,
              "total": 51,
              "point": 3,
              "grade": "C"
            }
          }
        ],
        "rain": [
          {
            "course_code": "CSC101",
            "title": "Modelling and Simulation",
            "unit": 3,
            "status": "C",
            "result": {
              "updatedAt": "2020-12-04T11:25:38.901Z",
              "_id": "5fca1cd729eca3320c6245cc",
              "matric_no": "U19CYS1076",
              "ca": 3,
              "exam": 48,
              "total": 51,
              "point": 3,
              "grade": "C"
            }
          },
          {
            "course_code": "CSC102",
            "title": "Introduction to Computer Science",
            "unit": 2,
            "status": "C",
            "result": {
              "updatedAt": "2020-12-04T11:25:38.901Z",
              "_id": "5fca1d2829eca3320c6245eb",
              "matric_no": "U19CYS1076",
              "ca": 3,
              "exam": 48,
              "total": 51,
              "point": 3,
              "grade": "C"
            }
          },
          {
            "course_code": "CSC103",
            "title": "Data Structures",
            "unit": 2,
            "status": "E",
            "result": {
              "updatedAt": "2020-12-04T11:25:38.901Z",
              "_id": "5fca1d5429eca3320c62460a",
              "matric_no": "U19CYS1076",
              "ca": 3,
              "exam": 48,
              "total": 51,
              "point": 3,
              "grade": "C"
            }
          }
        ]
      },
      {
        "session": "2020/2021",
        "harmattan": [
          {
            "course_code": "CSC104",
            "title": "Object Oriented Programming",
            "unit": 2,
            "status": "C",
            "result": {
              "updatedAt": "2020-12-04T11:11:54.557Z",
              "_id": "5fca1a8daac49e44a40a80e6",
              "matric_no": "U19CYS1076",
              "ca": 3,
              "exam": 48,
              "total": 51,
              "point": 3,
              "grade": "C"
            }
          },
          {
            "course_code": "CSC105",
            "title": "Problem Solving",
            "unit": 3,
            "status": "R",
            "result": {
              "updatedAt": "2020-12-04T11:11:54.557Z",
              "_id": "5fca1aaaaac49e44a40a8105",
              "matric_no": "U19CYS1076",
              "ca": 3,
              "exam": 48,
              "total": 51,
              "point": 3,
              "grade": "C"
            }
          }
        ],
        "rain": [
          {
            "course_code": "CSC101",
            "title": "Modelling and Simulation",
            "unit": 3,
            "status": "C",
            "result": {
              "updatedAt": "2020-12-04T11:25:38.901Z",
              "_id": "5fca1cd729eca3320c6245cc",
              "matric_no": "U19CYS1076",
              "ca": 3,
              "exam": 48,
              "total": 51,
              "point": 3,
              "grade": "C"
            }
          },
          {
            "course_code": "CSC102",
            "title": "Introduction to Computer Science",
            "unit": 2,
            "status": "C",
            "result": {
              "updatedAt": "2020-12-04T11:25:38.901Z",
              "_id": "5fca1d2829eca3320c6245eb",
              "matric_no": "U19CYS1076",
              "ca": 3,
              "exam": 48,
              "total": 51,
              "point": 3,
              "grade": "C"
            }
          },
          {
            "course_code": "CSC103",
            "title": "Data Structures",
            "unit": 2,
            "status": "E",
            "result": {
              "updatedAt": "2020-12-04T11:25:38.901Z",
              "_id": "5fca1d5429eca3320c62460a",
              "matric_no": "U19CYS1076",
              "ca": 3,
              "exam": 48,
              "total": 51,
              "point": 3,
              "grade": "C"
            }
          }
        ]
      }
    ]

现在，我打算在前端实现的是：

显示每个可用课程的结果，Harmattan 学期排在第一位，然后是 Rain 学期。
我想将每个学期的每门课程的所有单元加在一起 (TNU)。
我想把一个学期每个学期的每门课程的分数加在一起（TCP）
那我要3号（总分）的成绩除以2号（总学分）就可以得到GPA
第 3 和第 4 的结果现在将被保留并相应地添加到其他学期的结果中以给出累积值，即 CTNU、CTCP、CGPA。也就是说，Harmattan 学期 2019/2020 的总学分将相应地添加到 Rain 学期 2019/2020 和其他学期。与学分相同。

让我向您展示我的前端代码现在的样子

<div *ngFor="let result of results">
<div *ngIf="result.harmattan.length > 0">
          <table class="table table-striped">
            
            <thead>
              <tr>
                <th colspan="2">PROGRAM: {{userData?.department | uppercase}}</th>
                <th>ACADEMIC YEAR: {{result.session}}</th>
                <th colspan="2">SEMESTER: HARMATTAN</th>
              </tr>
              <tr class="thead-light">
                <th>COURSE CODE</th>
                <th>COURSE NAME</th>
                <th>UNIT</th>
                <th>GRADE</th>
                <th>CREDIT POINT</th>
              </tr>
            </thead>

            <tr *ngFor="let first of result.harmattan" >
              <td>{{first.course_code}}</td>
              <td>{{first.title}}</td>
              <td>{{first.unit}}</td>
              <td>{{first.result.grade}}</td>
              <td>{{first.result.point * first.unit}}</td>
            </tr>
            <p>Total Units: **value**</p>
            <p>Total Points: **value**</p>
            <p>GPA: **value**</p>
            <p>Cumulative Total Units: **value**</p>
            <p>Cumulative Total Points: **value**</p>
            <pCumulative GPA: **value**</p>
          </table>
        </div>
        <br>
        <div *ngIf="result.rain.length > 0">
          <table class="table table-striped">
            <thead>
              <tr>
                <th colspan="2">PROGRAM: {{userData?.department | uppercase}}</th>
                <th>ACADEMIC YEAR: {{result.session}}</th>
                <th colspan="2">SEMESTER: RAIN</th>
              </tr>
              <tr class="thead-light">
                <th>COURSE CODE</th>
                <th>COURSE NAME</th>
                <th>UNIT</th>
                <th>GRADE</th>
                <th>CREDIT POINT</th>
              </tr>
            </thead>
            <tr *ngFor="let second of result.rain">
              <td>{{second.course_code}}</td>
              <td>{{second.title}}</td>
              <td>{{second.unit}}</td>
              <td>{{second.result.grade}}</td>
              <td>{{second.result.point * second.unit}}</td>
            </tr>
            <p>Total Units: **value**</p>
            <p>Total Points: **value**</p>
            <p>GPA: **value**</p>
            <p>Cumulative Total Units: **value**</p>
            <p>Cumulative Total Points: **value**</p>
            <pCumulative GPA: **value**</p>

          </table>
        </div>
        <br>
      </div>

现在让我向您展示我正在谈论的内容的图形表示 graphical output

键

TNU：单位总数
TCP：总信用点数
GPA：平均绩点
CTNU：累计单位总数
CTCP：累计总学分
CGPA：累计平均绩点

下面是我的打字稿文件中的内容，如果需要的话。


    ngOnInit() {
        this.resultService.getResults()
        .subscribe(responseData => {
          this.results = responseData.results;
          console.log(this.results);
          this.userData = responseData.userData;
        });
      }

我会在评论区。

谢谢。

Answer 1

可能不是最好的解决方案，但试试这个：

html:

<div *ngFor="let result of resultData; let i = index">
<div *ngIf="result.harmattan.length > 0">
          <table class="table table-striped">
            
            <thead>
              <tr>
                <!-- <th colspan="2">PROGRAM: {{userData?.department | uppercase}}</th> -->
                <th>ACADEMIC YEAR: {{result.session}}</th>
                <th colspan="2">SEMESTER: HARMATTAN</th>
              </tr>
              <tr class="thead-light">
                <th>COURSE CODE</th>
                <th>COURSE NAME</th>
                <th>UNIT</th>
                <th>GRADE</th>
                <th>CREDIT POINT</th>
              </tr>
            </thead>

            <tr *ngFor="let first of result.harmattan" >
              <td>{{first.course_code}}</td>
              <td>{{first.title}}</td>
              <td>{{first.unit}}</td>
              <td>{{first.result.grade}}</td>
              <td>{{first.result.point * first.unit}}</td>
            </tr>
            <p>Total Units: {{ totalUnits(result.harmattan) }}</p>
            <p>Total Points: {{ totalPoints(result.harmattan) }}</p>
            <p>GPA: {{ totalGPA(result.harmattan) }}</p>
            <p>Cumulative Total Units: {{cumulativeUnits(result.harmattan, i, 'harmattan')}}</p>
            <p>Cumulative Total Points: {{cumulativePoints(result.harmattan, i, 'harmattan')}}</p>
            <p> Cumulative GPA: {{cumulativeGPA(result.harmattan, i, 'harmattan')}}</p>
          </table>
        </div>
        <br>
        <br>
        <div *ngIf="result.rain.length > 0">
            <table class="table table-striped">
              <thead>
                <tr>
                  <!-- <th colspan="2">PROGRAM: {{userData?.department | uppercase}}</th> -->
                  <th>ACADEMIC YEAR: {{result.session}}</th>
                  <th colspan="2">SEMESTER: RAIN</th>
                </tr>
                <tr class="thead-light">
                  <th>COURSE CODE</th>
                  <th>COURSE NAME</th>
                  <th>UNIT</th>
                  <th>GRADE</th>
                  <th>CREDIT POINT</th>
                </tr>
              </thead>
              <tr *ngFor="let second of result.rain">
                <td>{{second.course_code}}</td>
                <td>{{second.title}}</td>
                <td>{{second.unit}}</td>
                <td>{{second.result.grade}}</td>
                <td>{{second.result.point * second.unit}}</td>
              </tr>
              <p>Total Units: {{ totalUnits(result.rain) }}</p>
            <p>Total Points: {{ totalPoints(result.rain) }}</p>
            <p>GPA: {{ totalGPA(result.rain) }}</p>
            <p>Cumulative Total Units: {{cumulativeUnits(result.rain, i, 'rain')}}</p>
              <p>Cumulative Total Points: {{cumulativePoints(result.rain, i, 'rain')}}</p>
              <p>Cumulative GPA: {{cumulativeGPA(result.rain, i, 'rain')}}</p>
  
            </table>
          </div>

TS 文件：

cumulativeUnits(result, session, semester){
let tnu = 0
var tnuHarmattan = 0;
let thisSemester = 0;
if(session == 0){
  if (semester == 'harmattan'){
    for(let item of this.resultData[0].harmattan){
      tnuHarmattan += item.unit;
    }
    return tnuHarmattan;
  }
  else if (semester == 'rain'){
    for(let item of this.resultData[0].harmattan){
      tnuHarmattan += item.unit;
    }
    for(let item of this.resultData[0].rain){
      tnu += item.unit;
    }
    return tnuHarmattan + tnu;
  }
}
else{
  if (semester == 'harmattan'){
    for(let i:number = 0; i < session; i++){
  
      for(let item of this.resultData[i].harmattan){
        tnuHarmattan += item.unit;
      }
      for(let item of this.resultData[i].rain){
        tnu += item.unit;
      }
      for(let item of result){
        thisSemester += item.unit;
      }
    }
    return tnuHarmattan + tnu + thisSemester;
  }
  else if (semester == 'rain'){
    for(let i:number = 0; i <= session; i++){
  
      for(let item of this.resultData[i].harmattan){
        tnuHarmattan += item.unit;
      }
      for(let item of this.resultData[i].rain){
        tnu += item.unit;
      }
    }
    return tnuHarmattan + tnu;
  }
  
}

}

cumulativePoints(result, session, semester){
let gpSemester = 0;
let guyCPRain = 0;
let guyCPharmattan = 0;
if(session == 0){
  if (semester == 'harmattan'){
    for(let item of this.resultData[0].harmattan){
      guyCPharmattan += (item.result.point * item.unit);
    }
    return guyCPharmattan;
  }
  else if (semester == 'rain'){
    for(let item of this.resultData[0].harmattan){
      guyCPharmattan += (item.result.point * item.unit);
    }
    for(let item of this.resultData[0].rain){
      guyCPRain += (item.result.point * item.unit);
    }
    return guyCPharmattan + guyCPRain;
  }
}
else{
  if (semester == 'harmattan'){
    for(let i:number = 0; i < session; i++){
  
      for(let item of this.resultData[i].harmattan){
        guyCPharmattan += (item.result.point * item.unit);
      }
      for(let item of this.resultData[i].rain){
        guyCPRain += (item.result.point * item.unit);
      }
      for(let item of result){
        gpSemester +=  (item.result.point * item.unit);
      }
    }
    return guyCPharmattan + guyCPRain + gpSemester;
  }
  else if (semester == 'rain'){
    for(let i:number = 0; i <= session; i++){
  
      for(let item of this.resultData[i].harmattan){
        guyCPharmattan += (item.result.point * item.unit);
      }
      for(let item of this.resultData[i].rain){
        guyCPRain += (item.result.point * item.unit);
      }
    }
    return guyCPharmattan + guyCPRain;
  }
  
}

}

cumulativeGPA(result, session, semester){
let tnu = 0
var tnuHarmattan = 0;
let thisSemester = 0;
let guyCPRain = 0;
let guyCPharmattan = 0;
let gpSemester = 0;
if(session == 0){
  if (semester == 'harmattan'){
    for(let item of this.resultData[0].harmattan){
      guyCPharmattan += (item.result.point * item.unit);
      tnuHarmattan += item.unit;
    }
    return guyCPharmattan / tnuHarmattan;
  }
  else if (semester == 'rain'){
    for(let item of this.resultData[0].harmattan){
      guyCPharmattan += (item.result.point * item.unit);
      tnuHarmattan += item.unit;
    }
    for(let item of this.resultData[0].rain){
      guyCPRain += (item.result.point * item.unit);
      tnu += item.unit;
    }
    return ((guyCPharmattan + guyCPRain) / (tnuHarmattan + tnu)).toFixed(2);
  }
}
else{
  if (semester == 'harmattan'){
    for(let i:number = 0; i < session; i++){
  
      for(let item of this.resultData[i].harmattan){
        guyCPharmattan += (item.result.point * item.unit);
        tnuHarmattan += item.unit;
      }
      for(let item of this.resultData[i].rain){
        guyCPRain += (item.result.point * item.unit);
        tnu += item.unit;
      }
      for(let item of result){
        thisSemester += item.unit;
        gpSemester +=  (item.result.point * item.unit);
      }
    }
    return ((guyCPharmattan + guyCPRain + gpSemester) / (tnuHarmattan + tnu + thisSemester)).toFixed(2);;
  }
  else if (semester == 'rain'){
    for(let i:number = 0; i <= session; i++){
  
      for(let item of this.resultData[i].harmattan){
        guyCPharmattan += (item.result.point * item.unit);
        tnuHarmattan += item.unit;
      }
      for(let item of this.resultData[i].rain){
        guyCPRain += (item.result.point * item.unit);
        tnu += item.unit;
      }
    }
    return ((guyCPharmattan + guyCPRain) / (tnuHarmattan + tnu)).toFixed(2);
  }
  
}

}

如何用 AngularJs 对对象数组中的属性求和

How to sum value of a property in an array of objects with AngularJs

html

javascript

arrays

angularjs

typescript

如何用 AngularJs 对对象数组中的 属性 求和

How to sum value of a property in an array of objects with AngularJs

html

javascript

arrays

angularjs

typescript

如何用 AngularJs 对对象数组中的属性求和