Angular promise not triggering loop creation

I am encountering an issue with a particular function

handleFileInput(file: any) {  
      let promise = new Promise((resolve, reject) => {
      this.uploadFileDetails.push({ filename:this.FileName,filetype:this.FileType});
      ...
       resolve(data.Location);
      return promise;
}

After looping through this.uploadFileDetails, I am getting an error

ERROR TypeError: Cannot read properties of undefined (reading 'push')

   <div *ngFor="let fileDetails of uploadFileDetails">

    </div>

However, when I remove the loop, the values are being saved properly.

If anyone has a solution to this problem, I would greatly appreciate it. Thank you!

Answer №1

Could you please give this solution a try? It seems like there might be some issues with the scope of variables in the Promise response.

handleFileInput(file: any) { 
    var that = this; <--- add this line
    let promise = new Promise((resolve, reject) => {
        that.uploadFileDetails.push({ filename:that.FileName,filetype:that.FileType});
        ...
        resolve(data.Location);
        return promise;        
    }
}

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

Is it possible to use conditional logic on child elements in formkit?

I am a bit confused about how this process functions. Currently, I am utilizing schema to create an address auto complete configuration. My goal is to have the option to display or hide the fields for manual input. This is the current appearance of the ...

Facing Issue with Angular Firestore Authentication (getting null value for credentials)

In my Angular project, I am trying to implement authentication using Cloud Firestore as the database. I have updated the database rules as follows: service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read, write: ...

How do RxJS collection keys compare?

Is there a more efficient way to compare two arrays in RxJS? Let's say we have two separate arrays of objects. For example: A1: [{ name: 'Sue', age: 25 }, { name: 'Joe', age: 30 }, { name: 'Frank', age: 25 }, { name: & ...

Guide on combining vendor CSS files in a React application using Webpack

Incorporating third-party libraries is an essential part of my project. For example, I have Mapbox GL installed via npm, which comes with CSS files needed for its functionality. The Mapbox GL CSS file can be found at mapbox-gl/dist/mapbox-gl.css in the no ...

The typescript error "Cannot read properties of undefined" is encountered while trying to access the 'map' function

I was attempting to follow a guide on creating an app using typescript and react, but I'm encountering an error that says "Cannot read properties of undefined (reading 'map')". I'm not sure why this is happening, can someone please offe ...

Utilizing ES6 JavaScript for Creating Static Methods and Angular 2 Services

During the development of an Angular 2 app involving multiple calculation services, I encountered some interesting questions: Is it beneficial to use static in an Angular service provided on the application level? Or is it unnecessary? How does a static ...

Tips for utilizing the Axios API client created using the OpenAPITools code generator

Currently, I am utilizing the Swagger/OpenAPI Codegen tool to automatically generate an API client for the Fetch client within my Vue application. However, I have decided that I would prefer to make use of Axios instead. To begin this transition, I initiat ...

How to Determine the Requirement Status of Input Variables in an Angular 2 Directive?

Is it possible to specify an input variable in a directive as required or optionally as non-required? In the example below, we have set a default value of false. However, if I fail to declare it in the parent component template, ng2 AoT throws an error: ...

What is the correct way to implement Axios interceptor in TypeScript?

I have implemented an axios interceptor: instance.interceptors.response.use(async (response) => { return response.data; }, (err) => { return Promise.reject(err); }); This interceptor retrieves the data property from the response. The re ...

Having trouble with installing npm package from gitlab registry

I recently uploaded my npm package to the GitLab package registry. While the upload seemed successful, I am facing an issue trying to install the package in another project. When I run npm install, I encounter the following error: PS E:\faq\medu ...

Angular: Reacting to events with SVG attributes

Is there a way to access the attribute (e.g. fill) of an SVG object using an Angular event (e.g. mouseenter)? I attempted these different variations but had no success. <rect #rrr [attr.fill]="'green'" (mouseenter)="rrr.fill=&a ...

Show an array of arrays using a visual table representation

I am working with an Array of arrays in my data, and they are structured like this : Now, I am trying to showcase this array in a table, but all I am getting is a blank page. Here is the HTML code for the table (I have included only the first column' ...

What is the best way to specify parameter names and types for a TypeScript function that can take either one or two arguments?

Looking to create a function with two different calling options: function visit(url: string, options: Partial<VisitOptions>): void function visit(options: Partial<VisitOptions> & {url:string}): void I'm exploring the most effective w ...

What is the process of creating a new array by grouping data from an existing array based on their respective IDs?

Here is the initial array object that I have: const data = [ { "order_id":"ORDCUTHIUJ", "branch_code":"MVPA", "total_amt":199500, "product_details":[ { ...

Can someone help me figure out how to simulate an express middleware class method using jest and supertest?

I'm facing some challenges trying to achieve the desired outcome when mocking a method in a class using jest and supertest. I'm specifically looking for a solution that can help me bypass the verifyAuthenticated method with a mocked version in or ...

Encountering issues with integrating the node_module (website scraper) in Angular 4 for implementation

Recently, I've been attempting to integrate the node_module "website scraper" [1] into my Angular 4 project. After downloading and installing the module using "npm install website-scraper –save", I proceeded to import it in my Component with "import ...

Switching Facebook accounts on Firebase

I'm currently working on an Angular2 App that utilizes Firebase as its User system, with authentication providers including Email + Password, Facebook, and Google. One issue I have encountered is that when logging in with Facebook, I am unable to swi ...

Why is it that Angular is unable to locate the component factory for my component, even though I have declared it in the entryComponents option of my Module?

Is there a way to dynamically create and show a component in an ngx-bootstrap's modal? I attempted to declare the component in the entryComponents option of RegMktRiskHomeModule, but it did not work. Currently, I am only able to declare the Scenarios ...

ngx-timeago encounters errors during deployment of Angular application

When I build my project locally, everything goes smoothly... However, when using aws code build with a docker image and running npx ng build, the following error occurs: #25 41.40 ./node_modules/ngx-timeago/__ivy_ngcc__/fesm2015/ngx-timeago.js:439:76-112 ...

How to retrieve the value of a nested checkbox in Angular using dynamic methods

I successfully developed dynamic nested checkboxes in Angular and now I am looking to retrieve the values of the selected checkboxes. However, I encountered an issue with the JSON structure needed to implement this functionality. https://i.stack.imgur.com ...