Having trouble with subscribing to a template in Ionic framework

I'm attempting to showcase an image from Firebase storage using the following code:

Inside my component :

    findImg(img) {
    this.storage.ref('/img/' + img).getDownloadURL().subscribe(
      result => {
        console.log(result);
      }
    )

In my template :

    <ion-header>
  <ion-toolbar>
    <ion-title>La gamme : {{collectionName}}</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-card *ngFor="let pro of product | async">
    <ion-card-header>
      <ion-card-title>{{pro.name}}</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <p>{{pro.img}}</p>
      <div *ngIf="findImg(pro.img)"></div>
    </ion-card-content>
  </ion-card>
</ion-content>

pro.img represents the field "img" in my product database and the name of its corresponding image in storage.

Everything is working fine except for the ngIf-div. The console displays the result correctly but it seems to loop endlessly, causing Chrome to crash. I can't figure out why the loop never stops.

View image of the bug

angulartypescriptobservablesubscribeionic5

Answer №1

After attempting another approach, I decided to fetch the name and URL of an image and store them in an array:

tab: Array<any> = [[], []];

async getImage() {
 return this.storage.ref('img').listAll().subscribe( result => {
  result.items.forEach(imageRef => {
    this.image = imageRef.name;
    this.refImage = imageRef.getDownloadURL().then( url => {
      console.log('My URL : ' + url);
      return this.url = url;
    });
    this.tab.push([this.image, this.url]);
  });
  console.log(this.tab);
});
}

The first console.log statement is successful, but the last one is not. The first value in `this.tab` displays correctly, while the second one is undefined. It seems like there may be an issue with `getDownloadUrl()` and its promise handling, but I'm unsure how to resolve it.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues arise in TypeScript 5.1.3 with lodash due to type errors involving excessively deep type instantiation, which may potentially be infinite

Recently, I made updates to my Ionic/Angular project and now it is running Angular version 16.1.3 along with TypeScript version 5.1.3. In addition to this, my project also includes the following dependencies: "lodash-es": "^4.17.21", ...

angulartypescriptlodash

A step-by-step guide for updating a minor version of Angular with Angular CLI

I've been searching online for the answer to this straightforward question, but can't seem to find it anywhere... In my angular 4 project (made with angular cli), I want to utilize the newly introduced http interceptors in version 4.3. Could so ...

javascriptnode.jsangularnpmangular-cli

Using mat-select along with formControl to establish the default value

I'm struggling to assign a default value to my formControl, but it doesn't seem to be working as expected. select-hint-error-example.ts export class SelectHintErrorExample { animalControl = new FormControl('', [Validators.required]) ...

angularangular-material

Implementing a default child route in Nativescript

Is there a way for me to access /account/dashboard while the router is set to '/account'? My current routes do not seem to be working properly. The AccountPage component is loading instead of the AccountDashboardPage. export const routes = [ ...

angularnativescript

Util Deprecations resolved with TSLint Autofix

Is there a feature in VSCode that can automatically fix deprecations related to the util library? For example: if (isNullOrUndefined(this.api)) { Would be better written as: if (this.api === null || this.api === undefined) { While there isn't an ...

typescripttslint

What is the best way to create an array of strings that can include multiple elements from a set of strings?

Exploring different roles for authorization: ['admin', 'manager', 'user'] Is there a way to create a specific type, named Roles, which is essentially a string array ( string[] ) that is limited to only containing values from ...

typescript

Validator in Angular FormControl ensures that two fields have the same value or both are empty

When filling out a form with four fields, I have encountered a specific requirement. Two of the fields are mandatory, which is straightforward. However, the other two must either both be empty or both have a value - essentially resembling an XNOR logic sta ...

angulartypescriptvalidation

What factors determine when Angular automatically triggers a setTimeout function compared to another?

Sorry if this all seems a bit odd, but I'll do my best to explain the situation. We have been given access to a small service that provides a simple form UI which we collect results from using an event. We've successfully implemented this in two ...

javascriptangularjsangular

Loading CSS files conditionally in Angular2's index.html

Currently, my index.html page features a dark theme: <base href="/"> <html> <head> <title>XXX</title> </head> <body> <link rel="stylesheet" type="text/css" href="assets/dark_room.css"> <my-app ...

javascripthtmlcssangular

Creating a HTML element that functions as a text input using a div

I am encountering an issue with using a div as text input where the cursor flashes at the beginning of the string on a second attempt to edit the field. However, during the initial attempt, it does allow me to type from left to right. Another problem I am ...

htmlangulartypescript

Angular: navigate to a different page dynamically without triggering a refresh of the current page

Within my EditUserComponent, I am utilizing a path parameter called id. If the id is invalid, I would like to redirect to either the home page or an error page without having to refresh the entire page. Is there a way to achieve this without updating the ...

angularangular-ui-router

Steps to activate a function within an angular6 form-related directive

Is there a way to execute a function within a directive when the form is marked as pristine? I want to apply a CSS class to a tab header when the form is pristine. <form [formGroup]="awayForm" (ngSubmit)="onSubmit()" awayConfirm [cancelClicked]="cancel ...

angularangular2-formsangular2-directives

Angular Material 7 now allows you to create a link for an entire row!

Currently, I am utilizing Angular Material 7 tables (mat-table) and my goal is to create a link for an entire row so that it leads to a detailed page display. The specific requirement is to have a functional link that can be opened in a new tab, which mea ...

angularangular-material

In what way does Ionic determine the URL for input and send the password-protected email for logging in based on that URL?

I've set up a section for inserting the URL into the login form page using the following code: <ion-item> <ion-label floating>Company URL</ion-label> <ion-input type="url" value="" required></ion-input> </ion-item> ...

angularionic-framework

Styling child elements in Angular using css from its parent element

I have a question: Regarding the structure below <component-parent> <first-child> <second-child> <third-child></third-child> </second-child> </first-child> </component-parent> Now I want t ...

cssangular

Deploy your Angular website for absolutely no cost on Firebase by leveraging the Command Line Interface

Looking to deploy an Angular application on Firebase cloud for free using the CLI? Recently started delving into Angular 9 and exploring Firebase's cloud server capabilities, I'm interested in seeing how simple it is to deploy an app on Firebase. ...

angularfirebasegoogle-cloud-platformangular-clifirebase-cli

Combining angular's CLI project with a groovy Gradle application

I'm in the process of merging the seed project from angular-cli with my Gradle-packaged Java application, deployed on a Tomcat server. How can I successfully combine the Angular build with the Gradle build? Additionally, where is the ideal location t ...

angulargradleangular-cli

Is it possible to eliminate the array from a property using TypeScript?

Presenting my current model: export interface SizeAndColors { size: string; color: string; }[]; In addition to the above, I also have another model where I require the SizeAndColors interface but without an array. export interface Cart { options: ...

javascriptreactjstypescriptreact-native

Angular 2 does not include Bootstrap CSS by default

Found this helpful tip at https://angular.io/docs/ts/latest/guide/forms.html Time to include the stylesheet you need. Go to your application's root folder in the terminal and run this command: npm install bootstrap --save In index.html, make sure ...

twitter-bootstrapangular

Protractor fails to capture the presence of mat-dialog-container

My Protractor test for an Angular 5 application is functioning well, except when it has to handle a popup containing input fields. The HTML element representing the popup looks like this: <mat-dialog-container class="mat-dialog-container ng-tns-c26-5 n ...

angularprotractore2e-testing