0

Pues he buscado pero no me queda nada claro. esto es tal como lo tengo para ilustraros del problema

<ng-container *ngFor="let dato of datos; let i = index" [ngStyle]="{'background-color': dato.versionapi = Inaccesible : 'red'}">
    <div class="row justify-content-md-center" style="padding-bottom: 5%; border: 100px; background-color:#243a51; color:#ffffff">
        <div class="col col col-lg-3">
            {{ dato.nombre }}
        </div>
        <div class="col col col-lg-3">
            {{ dato.ws }}
        </div>
        <div class="col col col-lg-3  row justify-content-center">
            {{ dato.versionapi }}
        </div>
        <div class="col col col-lg-3  row justify-content-center">
            {{ dato.ws_provider }}
        </div>
    </div>
    <hr style="color: #000000;" />
</ng-container>

La idea es que la fila en la que el dato.versionapi sea igual a Inaccesible toda la fila se ponga en rojo.

5
  • No me queda muy claro, la variable Inaccesible que es? Si me lo explicas intentare ayudarte.
    – Pacne
    Commented el 17 abr. 2019 a las 11:01
  • El elemento ng-container no puede tener estilos, ya que Angular no lo pone en el DOM.
    – Pacne
    Commented el 17 abr. 2019 a las 11:15
  • {{dato.versionapi}} es la variable y dentro pueden llevar numeros de la version o contener un texto que diga que es Inaccesible
    – Julmo
    Commented el 17 abr. 2019 a las 11:59
  • Entonces Inaccesible es un string o una variable?
    – Pacne
    Commented el 17 abr. 2019 a las 12:04
  • es un string, en Typescript esta declarado como "any"
    – Julmo
    Commented el 17 abr. 2019 a las 12:48

1 respuesta 1

0

Como te he comentado antes, el ng-container no puede tener estilos, ya que Angular no lo pone en el DOM, y el ngStyle lo tendrás que colocarlo, por ejemplo, en un div. El ngStyle se utiliza mas para poner estilos mediante variables y condiciones sobre los estilos, el ngClass para poner una clase css si se cumple la condición. También se puede poner condiciones al ngStyle con un estilo en concreto.

  • Opción ngStyle:
<div [ngStyle]="dato.versionapi == Inaccesible && {'background-color': 'red'}">
  <!-- Tu bloque -->
</div>
  • Opción ngClass:

Archivo .html:

<div [ngClass]="{'nombre-de-la-clase': dato.versionapi == Inaccesible}">
  <!-- Tu bloque -->
</div>

Archivo .css:

nombre-de-la-clase {
  background-color: red;
}

Saludos

Tu Respuesta

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

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