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

Enhance your coding experience with VScode's intellisense feature when working with TypeScript

declare type Item = { name: string; location: string; source: string; }; declare type CollectionOfItems = { [key: string]: Item; }; export const CollectionOfItems: CollectionOfItems = { ITEM_1: { name: 'Item 1', location: &ap ...

typescriptvisual-studio-codeintellisense

Encountered an issue while loading the discovery document for the integration of AD FS using angular-oauth2-oid

I'm currently developing an angular SPA that requires authentication using AD FS, with Spring Boot as the backend. this.oauthService.configure({ redirectUri: window.location.origin + '/app/search', requireHttps: true, scope ...

angularoauth-2.0adfsangular-oauth2-oidc

Angular components are not properly adhering to the specified height and width dimensions for child elements

I seem to be having trouble applying height/width to a child component in angular. Can someone take a look and point out where I may have gone wrong? app.component.html <app-child [width]="10" [height]="10"></app-child> .child.ts import { C ...

cssangular

Acquire request data prior to exiting function in React

I am working on a NextJS application that utilizes axios for making requests to a backend API, which requires an authentication token. To handle this, I have implemented a function that retrieves the auth token and stores it in a variable at the module-lev ...

reactjstypescriptnext.jsaxios

When you add the /deep/ selector in an Angular 4 component's CSS, it applies the same style to other components. Looking for a fix?

Note: I am using css with Angular 4, not scss. To clarify further, In my number.component.css file, I have: /deep/ .mat-drawer-content{ height:100vh; } Other component.css files do not have the .mat-drawer-content class, but it is common to all views ...

htmlcssangularjsangularangular-material2

Traverse a tree structure of nested child objects in an Angular template using a JavaScript

Check out the Javascript object below: { "id": "1554038371930_ajhnms9ft", "name": "CPS", "nodes": [ { "id": "1554038905938_le34li2cg", "name": "Consumer Journey", "nodes": [ { ...

javascriptangularloopsobject

Verify that each field in the form contains a distinct value

I have a formarray with nested formgroups. How do I ensure that the elements within each formgroup are unique? Here is an example of my form setup: form: FormGroup = this.formBuilder.group({ fields: this.formBuilder.array([]), }); private createField() ...

angulartypescriptformsangular-forms

What methods does TypeScript use to verify primitive types during runtime?

Is it true that Typescript removes any type or interface at compile time? If so, how is it possible to determine an object's primitive type using the typeof keyword? Are custom interfaces handled differently than primitive types? const a = "strin ...

typescripttypesinterfacecompilation

Extend the row of the table according to the drop-down menu choice

I am working on a feature where a dropdown menu controls the expansion of rows in a table. Depending on the option selected from the dropdown, different levels of items need to be displayed in the table. For example, selecting level 1 will expand the first ...

javascriptangulartypescript

Ways to implement a filter pipe on a property within an array of objects with an unspecified value

Currently, I'm tackling a project in Angular 8 and my data consists of an array of objects with various values: let studentArray = [ { Name: 'Anu', Mark: 50, IsPassed: true }, { Name: 'Raj', Mark: 20, IsPassed: false }, { Na ...

javascripthtmlangulartypescriptangular-pipe

Angular 17 component fails to detect signal updates

When I set the value of a signal from component A using a service, it returns null when attempting to access the signal from component B (not the child). I recall this working in Angular 16, did something change in Angular 17? Service @Injectable({ pr ...

angularsignals

What is the best approach for implementing line coverage for object literal in Typescript Mocha unit-tests?

Lead: I am a newcomer to using typescript and writing unit tests with Mocha and Chai. Question: Can anyone provide tips on achieving 100% line coverage in unit tests for an object literal that isn't within a class? I want to avoid going static if pos ...

node.jstypescriptunit-testingmocha.jschai

Troubleshooting problem with refreshing URL on "ionic serve" mode

After transitioning my project from Ionic 2 to Ionic 3, I've encountered an issue with ionic serve and the rebuilding process. Initially, when I build the project, everything functions as expected. However, I've noticed that the URL in the brows ...

typescriptionic-frameworkionic2ionic3

Exploring the power of Prosemirror with NextJS through Tiptap v2

Greetings everyone, I am a newcomer to Stack Overflow and I am reaching out for assistance regarding an issue that has arisen. The problem at hand pertains to the development of the Minimum Viable Product (MVP) for my startup which specializes in creating ...

regextypescriptnext.jspaginationtiptap

Regex struggles to identify words containing foreign characters

Here is a method I have created to check if a user-input term matches any blacklisted terms: static checkAgainstBlacklist(blacklistTerms, term) { return blacklistTerms.some(word => (new RegExp(`\\b${word}\\b`, 'i&ap ...

typescriptkarma-jasmine

Steps for incorporating moment.js into an Angular 2 project

Having trouble importing moment.js into my angular2 application despite following various guides and solutions provided. Even though the package is present in my IDE (Visual Studio) and the moment.d.ts file is easily found, I keep encountering errors when ...

angulartwitter-bootstrap-3typescriptnpmmomentjs

What is the best way to combine data from two rows into one row?

Can someone help me with merging 2 sets of Line data into a single row for each entry? For example, the 'Green Bay Packers @ Chicago Bears' row should display '+3.5000 and -3.5000', while 'Atlanta @ Minnesota' should show &apo ...

javascriptjsonangularhtml-table

Utilizing the Filter Function to Eliminate an Element from an Array

I am a beginner in the world of React and I'm currently working on developing a simple timesheet tool where users can add tasks and save them. My tech stack includes React and Typescript. Currently, my main component has an empty array for tasks and ...

javascriptreactjstypescriptfunctionevents

What's the best way to ensure you're linting the correct file type for importing in Web

Upon installation of WebStorm, I encountered an issue when opening an existing Vue/TypeScript project. The IDE was not correctly importing and linting some file imports that were functioning properly through ESLint/webpack. In my usage of Vue 2.x with com ...

typescriptvue.jswebstormjetbrains-ide

Watchable: Yield the outcome of a Promise as long as watching continues

I am looking to create a function in Angular and TypeScript that will return an Observable for subscription. This Observable should emit the result of a Promise every three seconds. Currently, I have a function that returns a Promise, but I need it to ret ...

angulartypescriptobservable