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!

angulartypescript

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 there a way to convert a literal type from the type level to the term level in TypeScript?

Consider this scenario: I have created a type that can only hold one specific value: export type IfEqual<T, U> = (<G>() => G extends T ? 1 : 2) extends ...

typescripttype-systems

Determine parameter types and return values by analyzing the generic interface

I am currently working on a feature where I need to create a function that takes an interface as input and automatically determines the return types based on the 'key' provided in the options object passed to the function. Here is an example of ...

typescript

Position the text alongside the thumbnail rather than in the center

In the current setup, my username text is positioned in the center of the view. I want to reconfigure it so that it displays directly to the right of the thumbnail. However, removing the alignItems: 'center', property from the item disrupts the e ...

javascriptcssreactjstypescriptreact-native

What is the best way to incorporate auto-completion into a browser-based editor using Monaco?

Recently, I embarked on a project to develop a browser-based editor using monaco and antlr for a unique programming language. Following an excellent guide, I found at , gave me a great start. While Monaco provides basic suggestions with ctrl + space, I am ...

typescriptautocompleteeditorantlrmonaco-editor

This error occurred: "Property 'release' cannot be read because it is undefined."

Hello everyone! I'm in need of some assistance. I am trying to test my service tree with a specific structure. Here is an overview of my test: describe(`Service selector`, () => { describe(`getCurrentServiceTree`, () => { it(`should bui ...

typescriptreduxrxjsngrxangular5

Tips for effectively managing 404 errors in Angular 10 with modular routing

I'm facing challenges with handling 404 pages within an Angular 10 application that utilizes modular routing architecture. Here is the structure of my code: |> app |-- app.module.ts |-- app-routing.module.ts |-- app.component{ts, spec.ts, scss, ht ...

javascriptangulartypescriptangular-router

Error: FullCalendar does not display a header for the timeGridWeek view when the dates fall

Currently, I am integrating fullcalendar 5.5.0 with Angular 10. After migrating from fullcalendar v4 to v5, I noticed an annoying issue where the header for the date before the validRange start is no longer displayed: These are the parameters being used: ...

javascriptangularfullcalendarfullcalendar-5

Strange behavior detected in TypeScript generic function when using a class as the generic parameter

class Class { } const f0 = <T extends typeof Class> (c:T): T => { return c } const call0 = f0 (Class) //ok const f1 = <T extends typeof Class> (c:T): T => { const a = new c() return a //TS2322: Type 'Class' is not assigna ...

javascripttypescript

Guide on how to specify the return type for useMutation in the 'react-query' library

Here is the code snippet provided: const setFriendCode = (data: Params) => api({ data }) const [mutateSetFriendCode, state] = useMutation<Response, Params>( setFriendCode ) An issue arises with the type of parameters in the code. The compiler ...

reactjstypescripttypescript-typingsreact-query

What is the best way to access a class's private static property in order to utilize it for testing purposes?

Hello, I am currently a beginner in TypeScript and unit testing, so this inquiry may seem elementary to those more experienced. I am attempting to perform unit testing on the code provided below using sinon. Specifically, I am interested in testing whethe ...

node.jstypescriptunit-testingsingletonsinon

I am experiencing difficulties with implementing Angular material components in my project

I recently encountered an issue while trying to integrate angular material into my project. Despite importing the MatFormFieldModule, I received the following error: ERROR in src/app/login/components/login/login.component.html:2:1 - error NG8001: &apo ...

angulartypescript

What is the best way to programmatically set attributes on an HTML element or include HEAD/(LINK|TITLE) elements in Angular?

As I work on my Angular 12 application, I am facing the challenge of making it compatible with both LTR and RTL languages such as English and Arabic. This compatibility needs to be user-selectable within the application. Bootstrap, which provides the UI st ...

angularbootstrap-5bootstrap-rtl

Ways to remove cdk-overlay-container

I am currently working on an Angular project (version 9.1.4) that utilizes ng-bootstrap (version 6.1.0) to display modals. I have observed that whenever a modal is opened, it adds <div class='cdk-overlay-container' /> to the HTML structure. ...

angularng-bootstrap

The css values for component _nghost-c0 in an Angular application

Recently, I've been delving into Angular 5 and couldn't help but notice the peculiar html tags with ng generated attributes like _nghost-c0 and _nghost-c1... This got me wondering, what exactly do these attributes signify? [_nghost-c3] .employee ...

cssangularangular5

Can we specify the type of a destructured prop when passing it as an argument?

I have implemented Material UI's FixedSizeList which requires rendering rows in the renderRow function and passing it as a child to the component. The renderRow function accepts (index, style, data, scrolling) as arguments from the FixedSizeList comp ...

reactjstypescriptcastingmaterial-ui

Creating a responsive class getter with Vue.js 3 using the Composition API: a guide

How can I set up a class instance property to reactively display an error message when authentication fails? UserModel.ts export class User { private error: string; set errorMessage(errorMessage: string) { this.error = errorMessage; } get err ...

typescriptvue.jsclasspropertiesreactive

The PreloadAllModules feature in Angular is failing to load lazyloaded modules

I have successfully incorporated lazy loading for my modules Products and Customers, allowing me to view the chunks when I access their respective routes. Now, I am aiming to make the above modules preload. Adding the following line should accomplish this ...

angularangular7jhipsterangular-lazyloading

Is it advisable to send a response in Express.js or not?

When working with Express.js 4.x, I'm unsure whether to return the response (or next function) or not. So, which is preferred: Option A: app.get('/url', (req, res) => { res.send(200, { message: 'ok' }); }); Or Option B: ...

javascriptnode.jsexpresstypescript

Angular 5 - Performing Jasmine Testing: Simulating an Error Response on a Genuine HTTP Request

Before I start, I'd like to mention that I am currently in the process of learning Angular 4 as part of an internship. This is all very new to me. Anyway, I have a requirement where I need to simulate an error during an HTTP request in the controller ...

angularunit-testingjasminehttpresponsehttp-error

Issue: The Angular build encountered an error stating that the 'AggregateQuerySnapshot<T>' generic type requires one type argument after running npm install

Recently, I encountered a new error in my Angular project after performing an npm upgrade for maintenance purposes. Strangely, the upgrade did not involve changing any direct dependency versions. The problem arises when trying to run 'ng serve,' ...

angularfirebasenpm