CODEWITHSUNDEEP
angularrxjs
Younes Yaas
Younes Yaas

Reputation: 498

ANGULAR - Return data in DOM from subscribe()

I try to return with *ngFor component data found by subscribe() in my DOM, but nothing happens ...

What did I do wrong ?

My HTML : 

<ion-item detail="false" *ngFor="let chat of chats">
      <ion-row class="w100">
        <ion-col [size]="3">
          <div class="container-img-screenable">
            <img class="img-screenable" [src]="getContenderImg(chat.contenderID)" alt="">
          </div>
        </ion-col>
        <ion-col [size]="9">
          <div class="reposi">
            <h1 class="title">{{getContenderNameTruncated(chat.contenderID)}}</h1>
            <p class="text">{{getLastSentence(chat.chatID)}}</p>
          </div>
        </ion-col>
      </ion-row>
    </ion-item>

One of the three functions in my Component.TS :

getLastSentence(chatID:any){
    var path = '/Chats/' + chatID + '/lastMessage';
    this.CrudService.read(path).subscribe((lastSentence:any) => {
      return lastSentence
    })
}

Good to know : All functions return the good data, I've verified with console.log, the problem come when I want to return it ... I'm sure that is obvious but I'm newbie ...

Thank you for your help !!

Upvotes: 0

Views: 436

Answers (4)

Katumba
Katumba

Reputation: 3

  1. Ensure that you have a variable chats
chats: Array<any>;
  1. Then assign the result from your service call to the variable chats
getLastSentence(chatID:any){
    var path = '/Chats/' + chatID + '/lastMessage';
    this.chats = this.CrudService.read(path);
}
  1. Then use the async pipe in your HTML template to access the values in the chats array.
<ion-item detail="false" *ngFor="let chat of chats | async">
      <ion-row class="w100">
        <ion-col [size]="3">
          <div class="container-img-screenable">
            <img class="img-screenable" [src]="getContenderImg(chat.contenderID)" alt="">
          </div>
        </ion-col>
        <ion-col [size]="9">
          <div class="reposi">
            <h1 class="title">{{getContenderNameTruncated(chat.contenderID)}}</h1>
            <p class="text">{{getLastSentence(chat.chatID) | async | json}}</p>
          </div>
        </ion-col>
      </ion-row>
    </ion-item>

Upvotes: 0

CaneRandagio
CaneRandagio

Reputation: 378

you should do

*ngFor="let chat of chats | async"

as for subscribing, you don't need it because async takes care of subscription and unsubscription. However if you have to use it, remember to unsubscribe otherwise you may have a memory leak.

Upvotes: 1

ganqqwerty
ganqqwerty

Reputation: 2004

The problem that I see is that the function getLastSentence doesn't return any value. I would get rid of subscribe block and used the async pipe:

<ion-item detail="false" *ngFor="let chat of chats">
      <ion-row class="w100">
        <ion-col [size]="3">
          <div class="container-img-screenable">
            <img class="img-screenable" [src]="getContenderImg(chat.contenderID)" alt="">
          </div>
        </ion-col>
        <ion-col [size]="9">
          <div class="reposi">
            <h1 class="title">{{getContenderNameTruncated(chat.contenderID)}}</h1>
            <p class="text">{{getLastSentence(chat.chatID) | async | json}}</p>
          </div>
        </ion-col>
      </ion-row>
    </ion-item>

And your getLastSentence function will look like this and return Observable: 

getLastSentence(chatID:any): Observable<any> {
    var path = '/Chats/' + chatID + '/lastMessage';
    return this.CrudService.read(path);
}

This way you don't need to worry about unsubscribing, because the async pipe will do it for your on component destroy.

Upvotes: 2

Talg123
Talg123

Reputation: 1506

Change your subscribe into async/await 

async getLastSentence(chatID: string): Promise<string> {
    const path = `/Chats/${chatID}/lastMessage`;
    return await this.CrudService.read(path).toPromise()
}

To be honest Id actually check if there is a response and check its value. The thing is that you cannot return inside a subscribe, so you have few ways of doing it, this is the best tbh.

Upvotes: 1

Related Questions