2

This is somewhat hard to describe because there are multiple (wrong) results and I just don't know where the problem lays. However, the expected result is made clear and if anything is missing, I'm available to update the question.

Situation

When displaying a profile-detail (Parent), navigating to another profile-detail should be possible by changing the parameter in the route /profile/id. Therefore I subscribe to the param like mentioned in the accepted answer of this question.

// PARENT
constructor(private _route: ActivatedRoute) {
    this.profileId = _route.snapshot.params['id'];
}

ngOnInit() {
    this._route.params.subscribe(params => {
        this.profileId = params['id'];
        this.getResultByAsyncFunctionParent();
    }); 
}

The profile-detail exists out of some HTML-code and a few Children. All data in the Parent updates but the code in the Child does not (should update). Most Childs use the same id and are passed down using @Input and ngOnChanges(). I can confirm by debugging the flow of the application that the correct id is used to get the expected data and all needed methods are called.

// CHILD
@Input() childprofileId: string;

ngOnChanges(changes: SimpleChanges) {
    if (changes['childprofileId']) {
        if (this.childprofileId != null) {
            this.getResultByAsynFunctionChild();
        }
    }
}

The Parent uses the Child in HTML like

<app-projectview [childprofileId]="profileId"></app-projectview>

Question

Even if the model of the Child changes, the view is not updated. How do I force the Child to update (without having to navigate to a blank page and navigate back or something hacky like that)? I've tried ApplicationRef.tick(), NgZone.run(callback) and ChangeDetectorRef.detectChanges() like mentioned in the accepted answer of this question but these didn't seem to work in my case.

Current results

There is not one but four possible (wrong) results displayed, which I think has something to do with my async functions. However, solving the problem should have nothing to do with these functions.

We start by navigating like the situation described, from one profile-detail to another.

  1. The Child doesn't update and still shows the data from the last profile.
  2. The Child does update and merges the data from the last and the current profile.
  3. The Child does update and merges the data from the last and an empty object.
  4. The Child does update and merges the data from the current and an empty object.

Visual example of Case 3

  • IMG 1 - Startpoint: planning before navigation (correct)
  • IMG 2 - Endpoint: planning after navigating (incorrect)
  • IMG 3 - Expected result: planning after navigating (correct)

Async function example

// CHILD
getResultByAsynFunctionChild(): void {
    this._planningService.getCollection().subscribe(
        (toReturnPlanning: Planning[]) => {
            this.planning = toReturnPlanning;

            if (this.planning != null) {
                ... // Chart data logic, assign planningData in data
            }

            // Reassign the new data in the chart
            this.barChartData[0].data = data;
        }
    });
}

EDIT

  • Added the visual example of case 3
  • Added the async function example
Wouter Vanherck
  • 2,070
  • 3
  • 27
  • 41
  • How is `profileId` connected with `childprofileid`? – Günter Zöchbauer May 17 '17 at 13:47
  • @GünterZöchbauer The `profileId` is used to aquire the user-object in the Parent. the same `id` is then used in the Child to get different data, like projects, tasks, a planning, .... They are all async and shouldn't interfere with eachother. So I guess you could say they are not connected. However, when the `id` in the `params` is changed, so is the id in the Parent and Child. – Wouter Vanherck May 17 '17 at 13:51
  • I don't get what you think should be updated and why you think it should. – Günter Zöchbauer May 17 '17 at 13:53
  • @GünterZöchbauer The expected result is that when the data in the Child is updated (which it does), the Childview updates visually too. I know it should if the model changes, so I don't know what exactly the problem is. Like described in the cases, it does update sometimes, but as I replace the old data, it should only show the new data. I will add a visual example – Wouter Vanherck May 17 '17 at 13:58
  • Does this mean the parent isn't involved at all? If it's the view that doesn't update, your code should show the view. – Günter Zöchbauer May 17 '17 at 14:02
  • @GünterZöchbauer The navigation is done to the Parent through a `routerLink` and the Parent loads the Child in HTML like `` so I wouldn't say that the Parent has nothing to do with it. – Wouter Vanherck May 17 '17 at 14:05
  • I'd say your question just doesn't contain enough information. – Günter Zöchbauer May 17 '17 at 14:06
  • I agree, I shall add an example of an async call I make in one of the Childs so a mistake like not clearing the data can be crossed out. Besides that, I don't know what else I can add (suggestions?). Because I don't really know what causes this problem. Besides that, making a Plunker with the full code can't be done. – Wouter Vanherck May 17 '17 at 14:14
  • The view that you expect to be updating – Günter Zöchbauer May 17 '17 at 14:16
  • I have updated the question with a visual representation of the results from case 3 and the expected result. I also added the async function from the child which updates my data and should trigger the refresh. Except for some properties and other methods, the Child doesn't contain that much more code. – Wouter Vanherck May 17 '17 at 14:35

0 Answers0