How do I consume a local variable value in angular2?

Question

I have a simple function that returns me the value as number. This value basically how many items in a todolist is incomplete.

testFunction() {
    var a = 0;
    this.todos.forEach(function(elem, i) {
                    if(elem.status === true) {
                        a += 1;
                    }
                })
                console.log(a); // gives correct length
    }

Now in view I have

Total todo Items  Left <span>{{a}}</span> //Nothing coming here?

How do I log the value of a in template

You need to define the variable as private/public outside the function, as your class member. — FAISAL, Jul 31 '17 at 12:57
as a short answer, define `a` not within `var` but as `this.a = 0;` — MysterX, Jul 31 '17 at 12:58
I have done that already like so @FrankModica export class SomeComponent implements OnInit { todos : Todo[]; a: any; as well as a: number — Mike, Jul 31 '17 at 12:59
so you don't need to define your `a` inside of method. Remove that `var a = 0;` put instead `this.a = 0` and inside of loop use `this.a += 1` — MysterX, Jul 31 '17 at 13:01
@MysterX : i had done that initially but then I am getting an error like. Cannot read property 'a' of undefined — Mike, Jul 31 '17 at 13:02
The function testFunction returns nothing. But it should return a. — Alexander Elgin, Jul 31 '17 at 13:03
@Mike You have error because additionally you need to bind `this` to the `forEach` callback — MysterX, Jul 31 '17 at 13:04

MysterX · Accepted Answer · 2017-07-31T13:10:10.477

1

Angular can bind data to template only using own data fields of the component. So your code need to be as follows

testFunction() {
    this.a = 0;
    this.todos.forEach(function(elem, i) {
        if(elem.status === true) {
            this.a += 1;
        }
    }.bind(this))
    console.log(a); // gives correct length
}

UPD If you want to use ES6 syntax, you even do not need to bind this you can just use an arrow function which passes this from parent scope:

testFunction() {
    this.a = 0;
    this.todos.forEach((elem, i) => {
        if(elem.status === true) {
            this.a += 1;
        }
    })
    console.log(a); // gives correct length
}

edited Jul 31 '17 at 13:10

answered Jul 31 '17 at 13:06

MysterX

2,318
1
12
11

Why that bind sir? I missed that part I think. – Mike Jul 31 '17 at 13:10
1

Look at this link https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this – MysterX Jul 31 '17 at 13:11
1

@Mike the bind is used to preserve the value of this inside of a function if not then use arraow functions [link](https://stackoverflow.com/questions/45295467/how-to-access-this-variable-inside-this-function/45295586#45295586) – Rahul Singh Jul 31 '17 at 13:16
If you wanted to use ES6 syntax, you would just have written `for (const elem of this.todos) { … }` – Bergi Jul 31 '17 at 13:25

How do I consume a local variable value in angular2?

1 Answers1