如何对 angular 6 中 table 行中的嵌套数组字段求和？

Question

我正在使用 Angular 6 和 Html。我想对嵌套数组字段求和或求和并显示在行中。

我有一个包含多个学生的数组列表 ('marksEntryList')，还有一个包含多个课程的嵌套数组列表 ('marksDistributionList')。我放了个别课程的分数，所有课程的分数都会显示在一行中。

我想要这张图片：

ts 文件

    marksEntryList: any = [
      {
        studentId: '101',
        studentName: "Monir Zaman",
        marksDistributionList: [
         {
          courseId: '01',
          courseTitle: "Math",
          obtainedMarks: null
         },
         {
          courseId: '02',
          courseTitle: "English",
          obtainedMarks: null
         },
         {
          courseId: '03',
          courseTitle: "Physics",
          obtainedMarks: null
         }
        ]

       },
       {
         studentId: '102',
         studentName: 'Michel Jordan',
         marksDistributionList: [
          {
           courseId: '01',
           courseTitle: "Math",
           obtainedMarks: null
          },
          {
           courseId: '02',
           courseTitle: "English",
           obtainedMarks: null
          },
          {
           courseId: '03',
           courseTitle: "Physics",
           obtainedMarks: null
          }
        ]
       }
     ]

html

    <table border="1">
      <thead>
        <tr>
          <th>ID</th> <th>Name</th><th>Admission Test Subjects</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let applicant of marksEntryList">
          <td>{{applicant.studentId}}</td>
          <td>{{applicant.studentName}}</td>
          <td>
           <table>
            <th *ngFor="let testMarks of applicant.marksDistributionList">
                {{testMarks.courseTitle}}
            </th>
            <tbody>
             <tr>
              <td *ngFor="let testMarks of 
                applicant.marksDistributionList">
               <input type="text" [(ngModel)]="testMarks.obtainedMarks" />
              </td>
              <span>Total : 0</span>
             </tr>
           </tbody>
          </table>
        </td>
      </tr>
   </tbody>
 </table>

我希望对一行的所有课程分数进行总计或求和，并将其显示在总计标签中。谢谢。

Answer 1

在组件中创建方法 getTotal() 并从模板中调用此方法。

分量：

getTotal(marks) {
  let total = 0;

  marks.forEach((item) => {
    total += Number(item.obtainedMarks);
  });

  return total;
}

模板：

<span>Total: {{ getTotal(applicant.marksDistributionList) }}</span>

StackBlitz 上的现场演示：https://stackblitz.com/edit/angular-sum-table-ngmodel-dsfkpf

Answer 2

我建议为此使用响应式表单。但要回答你的问题，你只需要一个绑定到 total 元素的 total 方法。

堆栈闪电战： https://stackblitz.com/edit/angular-sum-table-ngmodel-u7pkhd

组件

getTotal(marks) {
  return marks.reduce((acc, {obtainedMarks}) => acc += +(obtainedMarks || 0), 0);
}

模板：

<span>Total : {{getTotal(applicant.marksDistributionList)}}</span>

如何对 angular 6 中 table 行中的嵌套数组字段求和？

How to sum nested array field in table row in angular 6?

sum

angular2-ngmodel

angular

ts 文件

html