0

I am returning an observable from parent component and passing it to child component. I am subscribing it in child component.

Below are the steps.

In parent component I am running a for loop in template. In template I am calling a function which is returning a observable. and its passed to the child component.

In child component I am subscribing it and then on ngdestroy on child component I am unsubscribing it.

The issue is that when i have more than one items in the loop the apis are getting continously called and running in infinte loop.

Please advice.

pooja singh
  • 53
  • 1
  • 5
  • Please add the code. – Günter Zöchbauer Nov 23 '17 at 09:23
  • Why extactly do you need to use Observables for this? If you do have a Parent Child Relationship in components, you should use @Input to send data to your ChildComponent. The ChildComponent should then call a service's method that would return an Observable that you can then subscribe to. What you're doing right now, might not scale well. – SiddAjmera Nov 23 '17 at 09:27
  • But shouldn't you pass just that postId to your childComponent and then inside the `ngOnInit` Lifecycle Hook Handler of the childComponent, you can call the API that would return you the comments for that postId. – SiddAjmera Nov 23 '17 at 09:50
  • @SiddharthAjmera - This is my api structure. I have users post. I fetch all the posts from the api of that user. I show that posts in for loop. Now with every post I have to call a api by passing postid which will pull the comments of that post. So basically I have a detail component where i get all the posts of the user. – pooja singh Nov 23 '17 at 09:53
  • Now in the template I do a for loop and in that for loop I pass [comments] = "getComments(postId)" This getComments is a function in .ts file which returns an observable by calling the comments api. Whats happening is that its calling an infinite loop. I am passing the comments as @input to child component which is comment component. in this comment component in am subscribing it and then on ngDestroy() i am unsubscribing it. – pooja singh Nov 23 '17 at 09:53
  • This is all which is done. – pooja singh Nov 23 '17 at 09:53
  • Please read my last comment and think about it. – SiddAjmera Nov 23 '17 at 09:55
  • @SiddharthAjmera - This is the whole architecture which we are following. Changing to that also behaves in the same way! – pooja singh Nov 23 '17 at 09:55
  • @poojasingh, I'm not saying that your code won't behave properly. It's just that it doesn't follow Angular's StyleGuide. – SiddAjmera Nov 23 '17 at 10:13

2 Answers2

0

You probably bind to a function in the view. It will be called every time change detection runs. Assign the result to a field and bind to that field instead

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
0

I feel the architecture you guys are following would not scale well.

Here's what I suggest:

So you are having two components:

PostComponent: This component will render a post.
CommentsComponent: This component will be used inside the PostComponent's Template.

Now suppose this is how your post component template looks like:

<!--Some data to be displayed about the post-->
<comments postId="post.id"></comments>

Now in the comments.component.ts file, here's what you'll have:

import { Component, Input, OnInit } from '@angular/core';

import { CommentsService } from 'path-to-comments-service';
import { Comment } from 'path-to-comment-model';

@Component({
  selector: 'app-comments',
  templateUrl: './comments.component.html',
  styleUrls: ['./comments.component.css']
})
export class AppComponent implements OnInit {
  @Input() postId;
  comments: Comment[];

  constructor(private commentsService: CommentsService) {}

  ngOnInit() {
    this.commentsService.getCommentsForPost(postId).subscribe(comments => this.comments = comments);
  }
}

After this, you can use these comments in your comments.component.html

NOTE: This is just my suggestion based on the info. you've provided in your question.

SiddAjmera
  • 38,129
  • 5
  • 72
  • 110
  • thanks @siddharth. looking into it. not sure this will work in for loop in post comment or not! updating you after checking. – pooja singh Nov 23 '17 at 11:00
  • same thing is happening. It only takes the last data from api. So if there is 10 api calls for getting the comments for 10 posts its just taking the last one – pooja singh Nov 23 '17 at 11:21
  • I'll need to have a look at your implementation. – SiddAjmera Nov 23 '17 at 11:32
  • I have done the same what you have mentioned. just This is running under for loop where different post ids are coming. – pooja singh Nov 23 '17 at 11:33