hello im using angular 6 i have a table ( add and select functions are
done ) i need to do the summ of 2lines, plz need help.
table HTML :
<table id="style-15" style="overflow:auto; width:99%; height:383px ;
overflow-y:auto; white-space: nowrap;
display:block;margin-left:5px;line-height: 3px; " class=" display nowrap
resp row-border hover table-leasing">
<thead >
<tr>
<th style="height: 30px;background:#f9f9f9;color:#203764;border-right:solid
4px #f9f9f9;border-top:none;border-bottom:none;"class="col-mois-header WH" >
Indicateur</th>
<th style="background:#f9f9f9;border-left: solid 1px #f9f9f9;text-align:
center" [ngStyle]="{'color':mounth === '01' ? '#e30613' : '#203764' }" class
="col-mois-header WH"> Janvier</th>
<th style="background:#f9f9f9;text-align: center" [ngStyle]="{'color':mounth
=== '02' ? '#e30613' : '#203764' }" class="col-mois-header WH">Février</th>
<th style="background:#f9f9f9;text-align: center" [ngStyle]="{'color':mounth
=== '03' ? '#e30613' : '#203764' }" class="col-mois-header WH" >Mars</th>
<th style="background:#f9f9f9;text-align: center" [ngStyle]="{'color':mounth
=== '04' ? '#e30613' : '#203764' }" class="col-mois-header WH">Avril</th>
<th style="background:#f9f9f9;text-align: center" [ngStyle]="{'color':mounth
=== '05' ? '#e30613' : '#203764' }" class="col-mois-header WH">Mai</th>
<th style="background:#f9f9f9;text-align: center" [ngStyle]="{'color':mounth
=== '06' ? '#e30613' : '#203764' }" class="col-mois-header WH">Juin</th>
<th style="background:#f9f9f9;text-align: center" [ngStyle]="{'color':mounth
=== '07' ? '#e30613' : '#203764' }" class="col-mois-header WH">Juillet</th>
<th style="background:#f9f9f9;text-align: center" [ngStyle]="{'color':mounth
=== '08' ? '#e30613' : '#203764' }" class="col-mois-header WH">Août</th>
<th style="background:#f9f9f9;text-align: center" [ngStyle]="{'color':mounth
=== '09' ? '#e30613' : '#203764' }" class="col-mois-header WH">Septembre</th
>
<th style="background:#f9f9f9;text-align: center" [ngStyle]="{'color':mounth
=== '10' ? '#e30613' : '#203764' }" class="col-mois-header WH">Octobre</th>
<th style="background:#f9f9f9;text-align: center" [ngStyle]="{'color':mounth
=== '11' ? '#e30613' : '#203764' }" class="col-mois-header WH">Novembre</th>
<th style="background:#f9f9f9;text-align: center" [ngStyle]="{'color':mounth
=== '12' ? '#e30613' : '#203764' }" class="col-mois-header WH">Décembre</th>
<th style="background:#f9f9f9;border-left:solid 4px #f9f9f9;text-align:
center;color:#e30613" class="col-mois-header WH">Année</th>
</tr>
<tr style="height: 10px; border-top:#f9f9f9;">
</tr>
</thead>
<tbody >
<tr *ngFor="let item of budgets; let i = index" style="line-height: 3px;
height:2px " >
<td height="2" [ngClass]="getColor(item.val[0])"class="nobord" style="
text-align: left ; width: 125px;border-right:solid 4px
#f9f9f9;margin-top:10px" >{{ item.ind}}</td>
<td height="2" [ngStyle]="{'background':mounth === '01' ? '#a1a1a1' :
'#dddddd','border':mounth === '01' ? 'solid 2px #a1a1a1' : 'solid 2px
#dddddd' }" class="nobord"> <input [disabled]="item.val[0] == 2"
[ngStyle]="{'color':mounth
=== '01' ? 'white' : 'black' }" [style.display]="getDis(item.ind)" type=
"number" [(ngModel)]="item.val[1]" (change)="test1(i,1)" style=" width:
120px; font-size: 13px ;text-align: center;border-bottom:none; height:18px "
pattern="[0-9]{1-10}" ></td>
<td height="2" [ngStyle]="{'background':mounth === '02' ? '#a1a1a1' :
'#dddddd','border':mounth === '02' ? 'solid 2px #a1a1a1' : 'solid 2px
#dddddd' }" class="nobord"> <input [disabled]="item.val[0] == 2"
[ngStyle]="{'color':mounth
=== '02' ? 'white' : 'black' }" [style.display]="getDis(item.ind)" type=
"number" [(ngModel)]="item.val[2]" (change)="test1(i,2)" style=" width:
120px;font-size: 13px ;text-align: center;border-bottom:none; height:18px "
pattern="[0-9]{1-10}" ></td>
<td height="2" [ngStyle]="{'background':mounth === '03' ? '#a1a1a1' :
'#dddddd','border':mounth === '03' ? 'solid 2px #a1a1a1' : 'solid 2px
#dddddd' }" class="nobord"> <input [disabled]="item.val[0] == 2"
[ngStyle]="{'color':mounth
=== '03' ? 'white' : 'black' }" [style.display]="getDis(item.ind)" type=
"number" [(ngModel)]="item.val[3]" (change)="test1(i,3)" style=" width:
120px;font-size: 13px ;text-align: center;border-bottom:none; height:18px "
pattern="[0-9]{1-10}"></td>
<td height="2" [ngStyle]="{'background':mounth === '04' ? '#a1a1a1' :
'#dddddd','border':mounth === '04' ? 'solid 2px #a1a1a1' : 'solid 2px
#dddddd' }" class="nobord"> <input [disabled]="item.val[0] == 2"
[ngStyle]="{'color':mounth
=== '04' ? 'white' : 'black' }" [style.display]="getDis(item.ind)" type=
"number" [(ngModel)]="item.val[4]" (change)="test1(i,4)" style=" width:
120px;font-size: 13px ;text-align: center;border-bottom:none; height:18px"
pattern="[0-9]{1-10}"></td>
<td height="2" [ngStyle]="{'background':mounth === '05' ? '#a1a1a1' :
'#dddddd' ,'border':mounth === '05' ? 'solid 2px #a1a1a1' : 'solid 2px
#dddddd'}" class="nobord"> <input [disabled]="item.val[0] == 2"
[ngStyle]="{'color':mounth
=== '05' ? 'white' : 'black' }" [style.display]="getDis(item.ind)" type=
"number" [(ngModel)]="item.val[5]" (change)="test1(i,5)" style=" width:
120px;font-size: 13px ;text-align: center;border-bottom:none; height:18px"
pattern="[0-9]{1-10}"></td>
<td height="2" [ngStyle]="{'background':mounth === '06' ? '#a1a1a1' :
'#dddddd','border':mounth === '06' ? 'solid 2px #a1a1a1' : 'solid 2px
#dddddd' }" class="nobord"> <input [disabled]="item.val[0] == 2"
[ngStyle]="{'color':mounth
=== '06' ? 'white' : 'black' }" [style.display]="getDis(item.ind)" type=
"number" [(ngModel)]="item.val[6]" (change)="test1(i,6)" style=" width:
120px;font-size: 13px ;text-align: center;border-bottom:none; height:18px"
pattern="[0-9]{1-10}"></td>
<td height="2" [ngStyle]="{'background':mounth === '07' ? '#a1a1a1' :
'#dddddd','border':mounth === '07' ? 'solid 2px #a1a1a1' : 'solid 2px
#dddddd' }" class="nobord"> <input [disabled]="item.val[0] == 2"
[ngStyle]="{'color':mounth
=== '07' ? 'white' : 'black' }" [style.display]="getDis(item.ind)" type=
"number" [(ngModel)]="item.val[7]" (change)="test1(i,7)" style=" width:
120px;font-size: 13px ;text-align: center;border-bottom:none; height:18px"
pattern="[0-9]{1-10}"></td>
<td height="2" [ngStyle]="{'background':mounth === '08' ? '#a1a1a1' :
'#dddddd','border':mounth === '08' ? 'solid 2px #a1a1a1' : 'solid 2px
#dddddd' }" class="nobord"> <input [disabled]="item.val[0] == 2"
[ngStyle]="{'color':mounth
=== '08' ? 'white' : 'black' }" [style.display]="getDis(item.ind)" type=
"number" [(ngModel)]="item.val[8]" (change)="test1(i,8)" style=" width:
120px;font-size: 13px ;text-align: center;border-bottom:none; height:18px"
pattern="[0-9]{1-10}"></td>
<td height="2" [ngStyle]="{'background':mounth === '09' ? '#a1a1a1' :
'#dddddd' ,'border':mounth === '09' ? 'solid 2px #a1a1a1' : 'solid 2px
#dddddd'}" class="nobord"> <input [disabled]="item.val[0] == 2"
[ngStyle]="{'color':mounth
=== '09' ? 'white' : 'black' }" [style.display]="getDis(item.ind)" type=
"number" [(ngModel)]="item.val[9]" (change)="test1(i,9)" style=" width:
120px;font-size: 13px ;text-align: center;border-bottom:none; height:18px"
pattern="[0-9]{1-10}"></td>
<td height="2" [ngStyle]="{'background':mounth === '10' ? '#a1a1a1' :
'#dddddd' ,'border':mounth === '10' ? 'solid 2px #a1a1a1' : 'solid 2px
#dddddd'}" class="nobord"> <input [disabled]="item.val[0] == 2"
[ngStyle]="{'color':mounth
=== '10' ? 'white' : 'black' }" [style.display]="getDis(item.ind)" type=
"number" [(ngModel)]="item.val[10]" (change)="test1(i,10)" style=" width:
120px;font-size: 13px ;text-align: center;border-bottom:none; height:18px"
pattern="[0-9]{1-10}"></td>
<td height="2" [ngStyle]="{'background':mounth === '11' ? '#a1a1a1' :
'#dddddd','border':mounth === '11' ? 'solid 2px #a1a1a1' : 'solid 2px
#dddddd' }" class="nobord"> <input [disabled]="item.val[0] == 2"
[ngStyle]="{'color':mounth
=== '11' ? 'white' : 'black' }" [style.display]="getDis(item.ind)" type=
"number" [(ngModel)]="item.val[11]" (change)="test1(i,11)" style=" width:
120px;font-size: 13px ;text-align:
center;border-bottom:none;;border-right:solid 4px #f9f9f9 height:18px"
pattern="[0-9]{1-10}"></td>
<td height="2" [ngStyle]="{'background':mounth === '12' ? '#a1a1a1' :
'#dddddd' ,'border':mounth === '12' ? 'solid 2px #a1a1a1' : 'solid 2px
#dddddd'}" class="nobord" style="border-right:solid 4px #f9f9f9"> <input [
disabled]="item.val[0] == 2" [ngStyle]="{'color':mounth === '12' ? 'white'
: 'black' }" [style.display]="getDis(item.ind)" type="number" [(ngModel)]=
"item.val[12]" (change)="test1(i,12)" style=" width: 120px;font-size: 13px
;text-align: center;border-bottom:none; height:18px;color:white"pattern=
"[0-9]{1-10}"></td>
<td height="2"class="nobord" style=" text-align: left ; width:
125px;border-left:solid 4px
#f9f9f9;margin-top:10px;background:#a1a1a1;border-right:solid 2px
#a1a1a1;width: 120px" ><input [disabled]="item.val[0] == 2" type="number" [(
ngModel)]="item.val[13]" (change)="test1(i,13)" style=" width:
120px;font-size: 13px ;text-align: center;border-bottom:none;
height:18px;color:white"pattern="[0-9]{1-10}"></td>
</tr>
</tbody>
</table>
TS table :
this.nav.show();
this.nav.doSomethingElseUseful();
this.budgets.push
(
{'ind':'Carnet de commandes','val':[2,0,0,0,0,0,0,0,0,0,0,0,0,0]},
{'ind':'Report','val':[0,0,0,0,0,0,0,0,0,0,0,0,0,0]},
{'ind':'Commandes de l année','val':[0,0,0,0,0,0,0,0,0,0,0,0,0,0]},
{'ind':'Commandes réalisées','val':[1,0,0,0,0,0,0,0,0,0,0,0,0,0]},
{'ind':'Dont travaux encours','val':[0,0,0,0,0,0,0,0,0,0,0,0,0,0]},
{'ind':'Stocks','val':[1,0,0,0,0,0,0,0,0,0,0,0,0,0]},
{'ind':'Matières premières & Marchandises','val':[0,0,0,0,0,0,0,0,0,0,0,0,0,
0]},
{'ind':'Travaux encours & produits finis','val':[0,0,0,0,0,0,0,0,0,0,0,0,0,0
]},
{'ind':'Provisions sur stock','val':[0,0,0,0,0,0,0,0,0,0,0,0,0,0]},
{'ind':'Couverture de stock','val':[0,0,0,0,0,0,0,0,0,0,0,0,0,0]},
{'ind':'Taux de déploiement','val':[2,0,0,0,0,0,0,0,0,0,0,0,0,0]},
{'ind':'Chiffre d affaires','val':[0,0,0,0,0,0,0,0,0,0,0,0,0,0]},
{'ind':'Dont Chiffre d affaires hors Groupe','val':[0,0,0,0,0,0,0,0,0,0,0,0,
0,0]},
{'ind':'Taux de facturation','val':[2,0,0,0,0,0,0,0,0,0,0,0,0,0]},
{'ind':'Marge opérationnelle','val':[2,0,0,0,0,0,0,0,0,0,0,0,0,0]},
{'ind':'Rentabilité commerciale','val':[2,0,0,0,0,0,0,0,0,0,0,0,0,0]}
);
* this.budgetvalget();*
*Select function ( budgetvalget ) : *
budgetvalget() {
this.myservice.getBudget(this.year).subscribe((value) => {
value.forEach ( (val) => {
this.budgets.forEach ( (res) => {
// console.log(val['KPI']);
//console.log(res['ind']);
if(res['ind']==val['KPI']){
res['val'][1]=val['Janvier'];
res['val'][2]=val['Fervrier'];
res['val'][3]=val['Mars'];
res['val'][4]=val['Avril'];
res['val'][5]=val['Mai'];
res['val'][6]=val['Juin'];
res['val'][7]=val['Juillet'];
res['val'][8]=val['Aout'];
res['val'][9]=val['Septembre'];
res['val'][10]=val['Octobre'];
res['val'][11]=val['Novembre'];
res['val'][12]=val['Decembre'];
res['val'][13]=val['Total'];
}
});
});
});
}
For exemple : i need to insert in the first value of Janvier the 2nd and
3rd value of janvier ( 1st line = 2nd line +3rd line )
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
