Tengo el siguiente codigo en angular para alinear ciertos datos pero me da un resultado asi, con espacios entre columnas y nose como quitarlos
Codigo
<div class="row">
<div *ngFor="let costconfig of model.costDetails; let j = index" [attr.data-index]="j">
<div class="row">
<div class="text-right margin-left-3" *ngIf="!costconfig.costEffect">
<div class="row col-sm-12">
<div class="col-sm-4">
<div *ngIf="costconfig.code=='Labor'">
{{costconfig.code}}(-): {{ costconfig.costAmount }}
</div>
</div>
</div>
<div class="row col-sm-12">
<div class="col-sm-4">
<div *ngIf="costconfig.code=='Part'">
{{costconfig.code}}(-): {{ costconfig.costAmount }}
</div>
</div>
<div class="col-sm-4">
<div *ngIf="costconfig.code=='IGST'">
{{costconfig.code}}(-): {{ costconfig.costAmount }}
</div>
</div>
<div class="col-sm-4">
<div *ngIf="costconfig.code=='CGST'">
{{costconfig.code}}(-): {{ costconfig.costAmount }}
</div>
</div>
</div>
<div class="row col-sm-12">
<div class="col-sm-4">
<div *ngIf="costconfig.code=='SGST'">
{{costconfig.code}}(-): {{ costconfig.costAmount }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Este es el array que estoy pasando:
model.costDetails: [
{
code: "Labor";
costAmount: 150;
},
{
code: "Part";
costAmount: 2141;
},
{
code: "Spl Disc";
costAmount: 0;
},
{
code: "IGST";
costAmount: 572.75;
},
{
code: "CGST";
costAmount: 0;
},
{
code: "SGST";
costAmount: 0;
}
];
col-sm-12
.row
es una fila, no una columna y no debe llevar clases de columna también en su lista de clases. No se porque lo has cambiado, ahora esta peor que antes.