Data in one component wont bind to array in injectable

Question

I have following issue:

I have one component, in which I am calling:

this.users = UsersInj.getUsersCollection()

In UsersInj, I have:

@Injectable()
export class UsersInj{
    public users:any = [];
    constructor(private _http:Http){
        this.getUsers().subscribe(
            success=>{
                this.users = success.json();
            },
            error =>{
                console.log('error')
            }
        )
    }

    getUsers(){
        return this._http.get('/api/user');
    }

    getUsersCollection(){
        console.log('GET USERS COLLECTION :',this.users);
        return this.users;
    }
}

However, this.users.length in my component is always 0. Any ideas?

UPDATE

It works when I pack this.users in UsersInj in an object.

PLNKR

Normally, in angular1, I would use angular.copy(), and it should work. — uksz, Mar 11 '16 at 11:37
It means it doesnt receive any data. Make sure u get data through service... — micronyks, Mar 11 '16 at 11:38
In your sercive constructor check wether u get data in `users` from server. — micronyks, Mar 11 '16 at 11:40

score 1 · Accepted Answer · edited May 23 '17 at 12:02

1

In the plunker you copy the values (references) once when TheContent is created.

export class TheContent {

  name: any;

  constructor(public nameService: NameService) {
    console.log("content started");
    this.info = nameService.info
    this.names = nameService.names;
  }
  changeMyName() {
    this.nameService.change();

  }
}

In NameService you assign a new array to this.names.

this.names = success.json();

this.names in TheContent and this.names in NameService are now not connected anymore.

What you probably want to do is

  change(){
    this.info.name = "Jane";
    this.http.get('https://api.github.com/repos/vmg/redcarpet/issues?state=closed').subscribe(success=>{
      while(this.names.length > 0) {
        this.names.pop();
      }
      this.names.push.apply(this.names, success.json());
      console.log('names: ' + this.names);
    });
  }

or alternatively copy the new array to TheContent again.

In Angular using an Observable that allows interested parties to subscribe to changes and pass the new value with the notification is the preferred way. See also https://stackoverflow.com/a/35568924/217408

edited May 23 '17 at 12:02

Community

1
1

answered Mar 11 '16 at 12:00

Günter Zöchbauer

490,478
163
1,733
1,404

I thought that this issue should be fixed in angualr2? – uksz Mar 11 '16 at 12:02
This is pretty much how it looked like in angular1: angular.copy ? – uksz Mar 11 '16 at 12:03
That's not related to Angular at all, that's pure JavaScript (or computer programming in general). – Günter Zöchbauer Mar 11 '16 at 12:04
Could you refer to an article which would explain why is that? (just interested in why is that) – uksz Mar 11 '16 at 12:50
At first you pass a reference from one class to another. Now both classes reference the same array. Then you replace the reference the first class has with something entirely different. Now these two classes refer to two different arrays (one refers to the old array, one to the new). If you want both to update synchronously you must not break the connection. In my example above I did this by not replacing the reference to the array but by replacing the content of the array. Both classes see the change because they still reference the same array. This is how memory works in computers. – Günter Zöchbauer Mar 11 '16 at 12:56

Data in one component wont bind to array in injectable

1 Answers1