Change attribute 'percents' to number

src/app/components/shared/list-statistic/list-statistic.component.html

@@ -10,7 +10,7 @@
 
   <ng-container matColumnDef="percentage">
     <mat-header-cell *matHeaderCellDef> Percentage </mat-header-cell>
-    <mat-cell *matCellDef="let cp">{{cp.percent}}</mat-cell>
+    <mat-cell *matCellDef="let cp">{{cp.percent.toFixed() * ' %'}}</mat-cell>
   </ng-container>
 
   <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

src/app/components/shared/list-statistic/list-statistic.component.ts

+
 import { Component, Input, OnInit } from '@angular/core';
 import { ContentGroup } from '../../../models/content-group';
 import { ContentService } from '../../../services/http/content.service';
@@ -5,26 +6,21 @@ import { Content } from '../../../models/content';
 import { ContentType } from '../../../models/content-type.enum';
 import { AnswerOption } from '../../../models/answer-option';
 import { ContentChoice } from '../../../models/content-choice';
-
 export class ContentPercents {
   content: Content;
-  percent: string;
-
-  constructor(content: Content, percent: string) {
+  percent: number;
+  constructor(content: Content, percent: number) {
     this.content = content;
     this.percent = percent;
   }
 }
-
 @Component({
   selector: 'app-list-statistic',
   templateUrl: './list-statistic.component.html',
   styleUrls: ['./list-statistic.component.scss']
 })
 export class ListStatisticComponent implements OnInit {
-
   @Input() contentGroup: ContentGroup;
-
   contents: Content[] = [];
   percents: number[] = [];
   displayedColumns = ['content', 'percentage'];
@@ -33,37 +29,33 @@ export class ListStatisticComponent implements OnInit {
   totalP = 0;
   correctCounts = 0;
   totalCounts = 0;
-
   constructor(private contentService: ContentService) {
   }
-
   ngOnInit() {
     this.percents = [73, 87, 69, 92, 77];
     this.contentService.getContentChoiceByIds(this.contentGroup.contentIds).subscribe(contents => {
       this.getContents(contents);
     });
   }
-
   getContents(contents: ContentChoice[]) {
-     this.contents = contents;
-     const length = contents.length;
-     this.dataSource = new Array<ContentPercents>(length);
-     for (let i = 0; i < length; i++) {
-       this.dataSource[i] = new ContentPercents(null, '' );
-       this.dataSource[i].content = this.contents[i];
-       if (contents[i].format === ContentType.CHOICE) {
-         this.contentService.getAnswer(contents[i].id).subscribe(answer => {
-           let percent = this.getCountCorrect(contents[i].options, answer.roundStatistics[0].independentCounts);
-           this.dataSource[i].percent = percent.toFixed() + ' %';
-           this.totalP += percent;
-           this.total = this.totalP / length;
-         });
-       } else {
-         this.dataSource[i].percent = 'NO';
-       }
-     }
+    this.contents = contents;
+    const length = contents.length;
+    this.dataSource = new Array<ContentPercents>(length);
+    for (let i = 0; i < length; i++) {
+      this.dataSource[i] = new ContentPercents(null, null );
+      this.dataSource[i].content = this.contents[i];
+      if (contents[i].format === ContentType.CHOICE) {
+        this.contentService.getAnswer(contents[i].id).subscribe(answer => {
+          let percent = this.getCountCorrect(contents[i].options, answer.roundStatistics[0].independentCounts);
+          this.dataSource[i].percent = percent;
+          this.totalP += percent;
+          this.total = this.totalP / length;
+        });
+      } else {
+        this.dataSource[i].percent = -1;
+      }
+    }
   }
-
   getCountCorrect(options: AnswerOption[], indCounts: number[]): number {
     let correctIndex;
     this.correctCounts = 0;