1

Estoy intentando filtrar y solo exponer los divs que tengan un background img en esa ruta. Lo he intentado controlar con *ngIf y usando condicionales con ngStyle pero no consigo terminarlo.

<div class="columna" [routerLink]="['/product/filtered']" [state]="{ id: famili.id}"
       class="card-1 img-fluid img-thumbnail shadow-sm p-3 mb-5 bg-white rounded"
       [ngStyle]="{'background': ' url(../../../assets/' + famili.name + '.jpg) no-repeat 0 0','background-size': '100% 100%'}">
   <div class="card-body-1 h4">
        {{famili.name | uppercase | translate }}
   </div>
</div>
1
  • 1
    Si el imagen o archiva tienes en tu carpeta assets, usa los metodos para File el 3 ago. 2020 a las 7:55

1 respuesta 1

3

Sería mejor que la API que consumes te devolviera una propiedad booleana que indicara si la familia tiene imagen asignada o no pero aun así te dejo una solución en angular.

En tu component.ts puedes hacer una llamada GET que haga a una petición al fichero de imagen si este existe en el servidor pues te devolverá la imagen(seguramente en bytes) o un error. Y en función de eso puedes mostrar u ocultar el div.

fileExists = false;

checkFileExistence(filename: string) {
    // esto lo puedes añadir en un servicio
    // También puedes usar los observables eso depende de como trabajes en tu proyecto
    this.httpClient.get(`https://miserver.com/assets/${filename}.jpg`).toPromise()
    .then(response => this.fileExists = true)
    .catch(e => this.fileExists = false);
}

En component.html puedes añadir un *ngIf que en función del valor de fileExists renderice o no el div.

<div [routerLink]="['/product/filtered']" [state]="{ id: famili.id}"
     class="columna card-1 img-fluid img-thumbnail shadow-sm p-3 mb-5 bg-white rounded"
     [ngStyle]="{'background': ' url(../../../assets/' + famili.name + '.jpg) no-repeat 0 0','background-size': '100% 100%'}"
    *ngIf="fileExists"
>
   <div class="card-body-1 h4">
        {{famili.name | uppercase | translate }}
   </div>
</div>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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