Как сложить поле вложенного массива в строке таблицы в угловых 6? - PullRequest
Новая
       36

Как сложить поле вложенного массива в строке таблицы в угловых 6?

1 голос
/ 02 октября 2019

Я использую Angular 6 и HTML. Я хочу суммировать или суммировать поле вложенного массива и показывать его в строке.

У меня есть список массивов ('marksEntryList') с несколькими студентами, а также список вложенных массивов ('marksDistributionList') с несколькими курсами. Я ставлю отдельные отметки курсов, и все отметки курсов будут отображаться в общей сложности подряд.

Мне нужно вот это изображение: enter image description here

stackblitz

ts file 

    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>

Я предполагаю суммировать или суммировать все оценки курсов в одной строке и показывать их в итоговой метке. Благодаря.

1 Ответ

2 голосов
/ 02 октября 2019

Создайте метод 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

...