0

Tengo el siguiente codigo en angular para alinear ciertos datos pero me da un resultado asi, con espacios entre columnas y nose como quitarlos Actual

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;
}

];

Resultado esperado: Resultado esperado

4
  • Será algo del contenido que estás generando... Si lo pongo a pelo me sale "bien". Ejemplo
    – masterguru
    el 15 nov. 2022 a las 18:21
  • En los col del primer y ultimo row pon col-sm-12. el 15 nov. 2022 a las 18:23
  • @Cris223511.dev no funcionó amigo el 15 nov. 2022 a las 18:40
  • Un div con la clase 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.
    – masterguru
    el 15 nov. 2022 a las 22:30

1 respuesta 1

0

Dentro de las filas, o mejor dicho, los row, siempre se define el tamaño de las rejillas que le pondrás a cada contenido. El error está que estás definiendo a col-sm-12 en la misma posición del row, de la cual no lo reconocerá, ya que el ancho del row dependerá al tamaño de las rejillas que le definas adentro. Tendrías que quitarlo y dejar todo como está, tu código quedaría así:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div *ngFor="let costconfig of quotationDetailsMasterModel.costDetails; let j = index" [attr.data-index]="j">
  <div class="text-right margin-left-3" *ngIf="!costconfig.costEffect">
    <div class="row">
      <div class="col-sm-4">
        <div *ngIf="costconfig.code=='Labor'">
          {{costconfig.code}}(-):   {{ costconfig.costAmount }}
        </div>
      </div>
    </div>

    <div class="row">
      <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">
      <div class="col-sm-4">
        <div *ngIf="costconfig.code=='SGST'">
          {{costconfig.code}}(-):  {{ costconfig.costAmount }}
        </div>
      </div>
    </div>
  </div>
</div>

Puedes ver mejor los resultados en el siguiente proyecto.

2
  • lo intente pero no funciona el 16 nov. 2022 a las 5:04
  • Bueno los resultados son tal cual a lo que muestras en la imagen el 16 nov. 2022 a las 13:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.