Getting typescript error in angular , not able to bind this properly

Question

const stateObj = {
        indicators: stateIndicators,
        filters: stateFilters,
        benchmarks: stateBenchmarks,
        request: stateRequest,
        ready: stateReady,
        visualization: stateVisualization,
        dimensions: stateDimensions,
        datasets: stateDatasets
      };

extend({
        getDefaultIndicators: function () {
          return stateObj.indicators.enabledIndicators
            .map((indicator) => find(stateObj.indicators.indicators, { name: indicator }));
        },
        getEnabledIndicators: function () {
          return this.request.indicators
            .map((i) => find(stateObj.indicators.indicators, { name: i }));
        },
        getEnabledBenchmarks: function () {
          return filter(stateObj.benchmarks, 'selected');
        },
        save: function () {
          if (tile) { return; }
          let serializedState = this.serialize();
          this.userStorage.saveExploreState(entity, serializedState);
        },
        serialize: function () {
          return {
            request: this.request,
            benchmarks: map(this.getEnabledBenchmarks(), 'name'),
            visualization: this.visualization,
            dimensions: this.dimensions,
            datasetId: datasetId
          };
        }
      }, stateObj);

Property 'request' does not exist on type '{ getDefaultIndicators: () => (Indicator | undefined)[]; getEnabledIndicators: () => any; getEnabledBenchmarks: () => { selected: boolean; name: string; }[]; save: () => void; serialize: () => any; }

Extend is lodash function I am getting type error for 'this.dimensions', 'this.visualization' as 'this' is not binding with stateObj and also 'this.userStorage' is class property , How to fix this issue.

Chellappan வ · Accepted Answer · 2020-02-06 09:41:19Z

1

Use arrow function to bind this context.

Try this:

extend({
        getDefaultIndicators: () => {
          return stateObj.indicators.enabledIndicators
            .map((indicator) => find(stateObj.indicators.indicators, { name: indicator }));
        },
        getEnabledIndicators:  () => {
          return this.request.indicators
            .map((i) => find(stateObj.indicators.indicators, { name: i }));
        },
        getEnabledBenchmarks: ()=> {
          return filter(stateObj.benchmarks, 'selected');
        },
        save:() => {
          if (tile) { return; }
          let serializedState = this.serialize();
          this.userStorage.saveExploreState(entity, serializedState);
        },
        serialize: ()=> {
          return {
            request: this.request,
            benchmarks: map(this.getEnabledBenchmarks(), 'name'),
            visualization: this.visualization,
            dimensions: this.dimensions,
            datasetId: datasetId
          };
        }
      }, stateObj);

answered Feb 6, 2020 at 9:41

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chellappan வ Over a year ago

@Nikhilsingh Glad to Help.

Collectives™ on Stack Overflow

Getting typescript error in angular , not able to bind this properly

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related