CODEWITHSUNDEEP
angularangular2-observables
ALSTRA
ALSTRA

Reputation: 661

Angular2 - how to observe an Array?

This is what I have:

//settings.ts

public messages : Array<Message>;

public static getInstance() {
   if (this.instance == null) {
      this.instance = new Settings();
   }
      return this.instance;
}

this.client.onMessageArrived = (message: Message) => {
  this.messages.push(message);     //new message is pushed in to the array
};

//log.component.ts

public msgs: Array<String>;

Settings.getInstance().messages.forEach(element => {
   this.msgs.push(element.getText());  //here I get the messages from settings.ts
});

//log.component.html

<ng-container  *ngFor="let msg of msgs">
   <md-card>{{msg}}</md-card>
</ng-container>

So what I want is: every time when a new Messege arrives, the html should show the new message too.

I know that I have to use Observables and I did look for help on the internet, but I still dont know how to solve this....

Thank you for any help!

Upvotes: 2

Views: 1151

Answers (1)

Aravind
Aravind

Reputation: 41533

Following code helps you,

 Settings.getInstance()
        .subscribe((messages)= >{
          messages.forEach(element => {
                this.msgs.push(element.getText());  //here I get the messages from settings.ts
                });
        });

The service should be modified as 

    public static getInstance() :Obserable<Message[]>) {
        if (this.instance == null) {
            //your http service call and map the response object 
        }
        return this.instance;
    }
.
.
.
this.client.onMessageArrived = (message: Message) => {
            this.messages.push(message);     //new message is pushed in to the array
        };
.
.

Upvotes: 1

Related Questions