Looking to retrieve the AssetLoadedFunc properties in the LoadAssets function? Wondering if you should use TypeScript or JavaScript

When I invoke this.AssetLoadedFunc within the function LoadAssets(callback, user_data)

 LoadAssets(callback, user_data) {
      this.glg.LoadWidgetFromURL("assets/Js/scrollbar_h.g", null,
          this.AssetLoaded,
          {
            name: "scrollbar_h", callback: callback,
            user_data: user_data
          });  
      }

AssetLoaded(glg_object, data) {
      if (data.name == "scrollbar_h") {
          if (glg_object != null)
            glg_object.SetResourceObject("$config/GlgHScrollbar", glg_object);
        }
        else
          console.error("Unexpected asset name");

         if (!this.AssetLoaded.num_loaded )
          this.AssetLoaded.num_loaded = 1;
        else
          ++this.AssetLoaded.num_loaded;
      }

ERROR TypeError: Cannot read property

ERROR TypeError: Cannot read property 'AssetLoaded' of null
at AssetLoadedFunc (app.component.ts:540)

javascriptangulartypescriptecmascript-6dom-events

Answer №1

The function AssetLoadedFunc is being called in a different context, making it unable to access the AssetLoaded property with the expression this.AssetLoaded. To resolve this issue, you can bind the context for AssetLoadedFunc and modify your code as follows:

LoadAssets(callback, user_data) {
      this.glg.LoadWidgetFromURL("assets/Js/scrollbar_h.g", null,
          this.AssetLoadedFunc.bind(this),
          {
            name: "scrollbar_h", callback: callback,
            user_data: user_data
          });  
      }
      AssetLoaded: any = { num_loaded: null }
      AssetLoadedFunc(glg_object, data) {
        if (data.name == "scrollbar_h") {
          if (glg_object != null)
            glg_object.SetResourceObject("$config/GlgHScrollbar", glg_object);
        }
        else
          console.error("Unexpected asset name");

         if (!this.AssetLoaded.num_loaded )
          this.AssetLoaded.num_loaded = 1;
        else
          ++this.AssetLoaded.num_loaded;
      }

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

Utilizing Angular's *ngIf directive in conjunction with Observables to handle data retrieved from

Utilizing multiple REST services for data retrieval and altering the value of an Observable in my component code has been a challenge. I've attempted to use *ngIf to toggle the visibility of div tags based on the result, however, the Observable's ...

angularrxjsobservableangular7

Changing the default yarn registry for a specific project

Typically, I fetch packages from the internal server by using the command: yarn config set registry http://custom-packages-server.com However, for a new project, I want to switch back to the default registry without affecting other projects. If I try cha ...

javascriptnpmyarnpkg

Having trouble with the `npm run dev` command in a Laravel project? You may be encountering a `TypeError: program.parseAsync is not

Recently, I integrated Vue.js into my ongoing Laravel project using npm to delve into front-end development with the framework. Following the installation, the instructions guided me to execute npm run dev in order to visualize the modifications made in . ...

javascriptvue.jsnpmvue-componentnpm-scripts

A Guide on Adding Excel-Like Filtering Functionality to AngularJS

I am struggling to implement a simple Excel-like filter for a table using AngularJS (v.1). I have shared my code snippet below and would appreciate any help to show filtered data in the table after checking a checkbox and clicking on the OK button. I have ...

javascriptjqueryhtmlangularjs

In Typescript, null values are allowed even when the type is set to be non-nullable

Can someone explain why the code below allows for null in typescript, even though number is specified as the type: TS playground // Not sure why null is accepted here when I've specified number as the type const foo = (): number => 1 || null ...

typescript

Customize your Material-UI theme with a unique hover effect for contained buttons

Currently, I am in the process of setting up a theme for Material-Ui on my React application. Within the app, there are two types of buttons that I utilize - contained and outlined. The issue lies with the hover effect on the contained button (while the ou ...

javascriptreactjsmaterial-ui

Failed to retrieve values from array following the addition of a new element

Does anyone have a solution for this problem? I recently added an element to my array using the push function, but when I tried to access the element at position 3, it wasn't defined properly processInput(inputValue: any): void { this.numOfIma ...

javascriptarraysjsonangulartypescript

AngularJS causing a modal popup to appear even when the associated button is disabled

When using a Bootstrap modal popup form that opens on button click in AngularJS, I noticed that the modal still appears even when the button is disabled. Can someone help me understand why this happens? Here is the code for the button: <a class="btn b ...

javascriptjqueryangularjstwitter-bootstraptwitter-bootstrap-3

What is the best way to outline this model using typescript?

Here is a JSON model that I am working with: { "loggers" : { "logger1" : { "name" : "logger1", "level" : "DEBUG", "sub_loggers" :{ "logger1.nested_logger1" : { "name": "lo ...

typescripttypescript-typings

Any suggestions for a more effective method of managing authentication in Angular2 rc3 besides using guards?

After upgrading to router 3.0.0-alpha.8, I encountered a hurdle with authentication in my existing Angular2 app. Previously, I handled login/authentication by extending the RouterOutlet with an AuthRouterOutletDirective. This allowed me to easily check if ...

authenticationangularangular2-routingangular2-router3

Using jQuery to retrieve the domain extension from a URL

Seeking assistance with extracting domain extensions from various URLs using jQuery. Uncertain how to account for all possible scenarios. Here are the parts of the URL that need to be extracted: https://www.amazon.**com**/dp/067144901X https://www.amazon. ...

javascriptjqueryhtmlurl

"Angular encountered an error while attempting to access the property 'data' from an undefined

I'm encountering an issue when trying to retrieve data from a JSON file. Upon clicking a button to display the data in a textarea, the first click does not yield any result, but subsequent clicks work as expected. The program functions by fetching an ...

jsonangulartypescript

Utilizing a Promise in NodeJS and Express to effectively capture the writing functionality of the HTTP module

Currently, I am in the process of developing an Express application with the following components: NodeJS v8 express (latest version) As I delved into the workings of the onHeaders module and observed how it alters the HTTP headers, I became keen on lev ...

javascriptnode.jshttpexpress

Customizing the layout of specific pages in NextJSIncorporating

In my Next.js project, I'm trying to set up a header and footer on every page except for the Login page. I initially created a layout.tsx file in the app directory to apply the layout to all pages, which worked fine. However, when I placed another lay ...

javascripthtmlnext.js

Retrieving user email with Vue.js from Firebase

Currently, I am in the process of developing a chat application using Vue.js and Firebase. This project has been quite challenging for me as I am new to both Vue and Firebase. One specific issue I have encountered is trying to retrieve the user's ema ...

javascriptfirebasevue.jsfirebase-authenticationvue-component

Output PHP code within the HTML content using javascript's innerHTML functionality

I wrote a PHP function that increments by +1 every time it is executed. function count_likes(){ $collect=file_get_contents('like_counter.txt')+1; $count=file_put_contents("like_counter.txt", $collect); echo $collect; I also have a JavaScr ...

javascriptphp

The typescript MenuProvider for react-native-popup-menu offers a range of IntrinsicAttributes

Looking to implement drop-down options within a Flatlist component, I've utilized the React Native Popup Menu and declared MenuProvider as the entry point in App.tsx. Encountering the following error: Error: Type '{ children: Element[]; }' ...

javascriptreactjstypescriptreact-native

Customizing the width of the JQuery $ui.progressbar by overriding its properties

After spending some time, I successfully overrode the function that controls the width of the progress bar element in the jQuery UI widget version 1.12.1 from September 14, 2016. Initially, I needed the progress bar to completely fill a column in a table. ...

javascriptjqueryhtmlcssjquery-ui

Exploring the transformation of asynchronous callbacks to promises in Node.js

As a novice, I am currently in the process of developing a User Management system using NodeJS. Previously, I had implemented it with MongoDB and Express, but now I am rebuilding it with Express, Sequelize, and Postgresql to enhance my understanding of cer ...

javascriptnode.jspostgresql

Is there a way to customize the language used for the months and days on the DatePicker

Is there a way to change the language of the DatePicker (months and days) in Material UI? I have attempted to implement localization through both the theme and LocalizationProvider, but neither method seems to work. Here are some resources I have looked a ...

typescriptmaterial-uidatepicker