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 Commented 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

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.