right use of this - cannot read property emit of undefined in Angular

Question

I have in an angular component this piece of code:

  @Output() fixPercentChanged = new EventEmitter<number>();

And I have this event:

fixChanged(e) {
    setTimeout(() => {
      let fix = e.component.option('value');
      this.fixPercentChanged.emit(100 - fix);
    }, 100); 
  }

This event is binded in the markup to a keydown event of an input element:

<dxi-item dataField="fix" [label]="{text: 'Fix %'}" editorType="dxNumberBox"
                [editorOptions]="{format: '#,##0.00\'%\'', onKeyDown: fixChanged, valueChangeEvent: 'keyup'}">
        <dxi-validation-rule type="required" message="A mező kitöltése kötelező"></dxi-validation-rule>
      </dxi-item>

It gets fired, but the console says, that fixPercentChanged is undefined. If I print this to the console, I get the dx-number-box input element. this should refer in this case to the component itself. How to rewrite the function in oder to correct this?

You don't show how `fixChanged` is bound, give a [mre], but almost certainly https://stackoverflow.com/q/20279484/3001761. — jonrsharpe, Nov 08 '20 at 20:41
I have edited the question. I bind the fixChanged event the standard way. — derstauner, Nov 08 '20 at 20:47
You're passing an object to `editorOptions`, presumably that's what's breaking the binding. — jonrsharpe, Nov 08 '20 at 20:49

score 0 · Answer 1 · answered Nov 08 '20 at 20:53

@jonrsharpe, your link pointed out the issue. This is the right syntax:

  fixChanged = (e) => {
    setTimeout(() => {
      let fix = e.component.option('value');
      this.fixPercentChanged.emit(100 - fix);
    }, 100); 
  }

Now, this refers to the component itself and the event gets emitted.

right use of this - cannot read property emit of undefined in Angular

1 Answers1