如何使用插值更改角度 6 中的变量？

Question

All I've been trying to do is change 5 to 6 using interpolation, but nothing I'm doing is working :(

component.ts
  x = 5;

  changeX(){
    this.x = this.x + 1;
  }

component.html

{{x}}

<div>
  wtf{{x.changeX}}
</div>

{{x}}

Answer 1

That's not how it works. You'll have to somehow call changeX . But you can only do that if there's any DOM event. So I've added changeX as a click event handler to the div . Whenever the div is clicked, x will increment.

{{x}}

<div (click)="changeX()">
  wtf
</div>

{{x}}

Here's a StackBlitz for it.

Answer 2

this works for me:

in the component:

  @Output()
  private x = 5;

  public incX() {
    this.x++;
  }

in the template:

{{x}}
<div>
  wtf{{incX()}}
</div>
{{x}}