loop over scoreboard values from array

static/src/app/statistic/war-detail/scoreboard/scoreboard.component.html

@@ -10,7 +10,7 @@
     [columnMode]="'force'"
     [scrollbarV]="true"
     [selectionType]="'single'">
-    <ngx-datatable-column name="{{tableHead[0]}}" prop="name" [width]="210" style="padding-left:10px">
+    <ngx-datatable-column name="{{tableHead[0].head}}" prop="name" [width]="210" style="padding-left:10px">
       <ng-template ngx-datatable-cell-template let-row="row" let-value="value">
         <span class="player-name"
               [style.color]="row['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
@@ -18,92 +18,24 @@
         </span>
       </ng-template>
     </ngx-datatable-column>
-    <ngx-datatable-column name="{{tableHead[1]}}" prop="fraction" [width]="90">
+    <ngx-datatable-column name="{{tableHead[1].head}}" prop="fraction" [width]="90">
       <ng-template ngx-datatable-cell-template let-value="value">
         {{value === 'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}}
       </ng-template>
     </ngx-datatable-column>
-    <ngx-datatable-column [width]="columnWidth" prop="kill">
+
+    <div *ngFor="let column of tableHead.slice(2, tableHead.length-1) ">
+      <ngx-datatable-column [width]="columnWidth" prop="{{column.prop}}">
         <ng-template ngx-datatable-header-template let-sort="sortFn">
         <span class="datatable-header-cell-wrapper">
-          <span class="datatable-header-cell-label text-truncate" title="{{tableHead[2]}}" (click)="sort()">
+          <span class="datatable-header-cell-label text-truncate" title="{{column.head}}" (click)="sort()">
-            <img src="../../../../assets/tank.png">
+            <img src="../../../../assets/scoreboard/{{column.prop}}.png">
-          </span>
-        </span>
-      </ng-template>
-    </ngx-datatable-column>
-    <ngx-datatable-column [width]="columnWidth" prop="friendlyFire">
-      <ng-template ngx-datatable-header-template let-sort="sortFn">
-        <span class="datatable-header-cell-wrapper">
-          <span class="datatable-header-cell-label text-truncate" title="{{tableHead[3]}}" (click)="sort()">
-            <img src="../../../../assets/tank.png">
-          </span>
-        </span>
-      </ng-template>
-    </ngx-datatable-column>
-    <ngx-datatable-column [width]="columnWidth" prop="vehicleLight">
-      <ng-template ngx-datatable-header-template let-sort="sortFn">
-        <span class="datatable-header-cell-wrapper">
-          <span class="datatable-header-cell-label text-truncate" title="{{tableHead[4]}}" (click)="sort()">
-            <img src="../../../../assets/scoreboard/vlight.png">
-          </span>
-        </span>
-      </ng-template>
-    </ngx-datatable-column>
-    <ngx-datatable-column [width]="columnWidth" prop="vehicleHeavy">
-      <ng-template ngx-datatable-header-template let-sort="sortFn">
-        <span class="datatable-header-cell-wrapper">
-          <span class="datatable-header-cell-label text-truncate" title="{{tableHead[5]}}" (click)="sort()">
-            <img src="../../../../assets/scoreboard/vheavy.png">
-          </span>
-        </span>
-      </ng-template>
-    </ngx-datatable-column>
-    <ngx-datatable-column [width]="columnWidth" prop="vehicleAir">
-      <ng-template ngx-datatable-header-template let-sort="sortFn">
-        <span class="datatable-header-cell-wrapper">
-          <span class="datatable-header-cell-label text-truncate" title="{{tableHead[6]}}" (click)="sort()">
-            <img src="../../../../assets/scoreboard/vair.png">
-          </span>
-        </span>
-      </ng-template>
-    </ngx-datatable-column>
-    <ngx-datatable-column [width]="columnWidth" prop="revive">
-      <ng-template ngx-datatable-header-template let-sort="sortFn">
-        <span class="datatable-header-cell-wrapper">
-          <span class="datatable-header-cell-label text-truncate" title="{{tableHead[7]}}" (click)="sort()">
-            <img src="../../../../assets/tank.png">
-          </span>
-        </span>
-      </ng-template>
-    </ngx-datatable-column>
-    <ngx-datatable-column [width]="columnWidth" prop="flagTouch">
-      <ng-template ngx-datatable-header-template let-sort="sortFn">
-        <span class="datatable-header-cell-wrapper">
-          <span class="datatable-header-cell-label text-truncate" title="{{tableHead[8]}}" (click)="sort()">
-            <img src="../../../../assets/tank.png">
-          </span>
-        </span>
-      </ng-template>
-    </ngx-datatable-column>
-    <ngx-datatable-column [width]="columnWidth" prop="death">
-      <ng-template ngx-datatable-header-template let-sort="sortFn">
-        <span class="datatable-header-cell-wrapper">
-          <span class="datatable-header-cell-label text-truncate" title="{{tableHead[9]}}" (click)="sort()">
-            <img src="../../../../assets/tank.png">
-          </span>
-        </span>
-      </ng-template>
-    </ngx-datatable-column>
-    <ngx-datatable-column [width]="columnWidth" prop="respawn">
-      <ng-template ngx-datatable-header-template let-sort="sortFn">
-        <span class="datatable-header-cell-wrapper">
-          <span class="datatable-header-cell-label text-truncate" title="{{tableHead[10]}}" (click)="sort()">
-            <img src="../../../../assets/tank.png">
           </span>
         </span>
         </ng-template>
       </ngx-datatable-column>
+    </div>
+
     <!--<ngx-datatable-column [width]="80" name="" prop="name">-->
     <!--<ng-template ngx-datatable-cell-template let-value="value">-->
     <!--<span class="btn btn-sm btn-default in-table-btn disabled">Detail</span>-->

static/src/app/statistic/war-detail/scoreboard/scoreboard.component.ts

@@ -19,8 +19,13 @@ export class ScoreboardComponent implements OnChanges {
 
   @Output() playerTabSwitch = new EventEmitter();
 
-  tableHead = ['Spieler', 'Fraktion', 'Kills', 'FF', 'Fzg(L)', 'Fzg(H)', 'Fzg(A)',
+  tableHead = [
-    'Revive', 'Flagge', 'Tod', 'Respawn'];
+    {prop: 'name', head: 'Spieler'}, {prop: 'fraction', head: 'Fraktion'}, {prop: 'kill', head: 'Kills'},
+    {prop: 'friendlyFire', head: 'FriendlyFire'}, {prop: 'vehicleLight', head: 'Fahrzeug (leicht)'},
+    {prop: 'vehicleHeavy', head: 'Fahrzeug (schwer)'}, {prop: 'vehicleAir', head: 'Fahrzeug (Luft)'},
+    {prop: 'revive', head: 'Revive'}, {prop: 'flagTouch', head: 'Flagge'}, {prop: 'death', head: 'Tod'},
+    {prop: 'respawn', head: 'Respawn'}
+  ];
 
   isSteamUUID = PlayerUtils.isSteamUUID;