*ngFor doesnt update on Value Change

Question

My *ngFor doesnt update on Value Change. My relevant code:

chat.component.html

<div *ngFor="let contact of contactList; let i = index;">
    {{contact.name}}
</div>

chat.component.ts

export class ChatComponent implements OnInit {
    public selectedTeamId: string;
    constructor(
        private apiClientService :ApiClientService,
        private teamService: SetTeamService
    ){ 
         this.teamService.teamIdChange.subscribe(value => {
            this.selectedTeamId = value;
            this.apiClientService.getAPIObject(param, "chat-room-list").then((data) => {
                 this.contactList = data.response_payload.contacs;
            });
        });
     }
 }

setTeam.service.ts

export class SetTeamService {
    public teamId:string = '';
    teamIdChange: Subject<string> = new Subject<string>();
    constructor( ) {
        this.teamIdChange.subscribe((value) => {
            this.teamId = value;
            sessionStorage.setItem('teamId',value);
        });
    }

    setTeamId(teamId){
       this.teamIdChange.next(teamId);
    }
}

The following steps should happen:

The Set Team ID function get called with a new value
The Subscribe in the constructer should get notified
The component starts an GET Api Call with new param
The *ngFor in the Template should iterate over the new Value in contactList

Step 1, 2 and 3 are working. I get the value from my API and the contactList updates.

Sadly Step 4 doesnt work. the Template doesnt react or rerender on the value change. Usually im doing this stuff on the NgOnInit and it works this way. But this time i need a subscribe on a service Value.

EDIT:

Value from the API Response:

{
    "status": {
        "statusCode": 0,
        "statusMessage": "OK"
    },
    "response_payload": {
        "contacs": [
            {
                "id": "0c9d8efc-fc8a-42fc-80d8-64532679df48",
                "crm_account": "d9eec698-80d2-4976-8b79-9a900737848a",
                "name": "XXX",
                "email": "XXX",
                "deleted": "0",
                "update_date": "2019-07-25 05:05:48",
                "create_date": "2019-07-25 05:05:48",
                "hasChat": false
            },
            {
                "id": "885c2c11-cd5b-461c-b6dd-efdf4e21966d",
                "crm_account": "6615b728-c484-4f94-bc74-b214fab2a9e3",
                "name": "YYY",
                "email": "YYY",
                "deleted": "0",
                "update_date": "2019-08-02 15:02:15",
                "create_date": "2019-08-02 15:02:15",
                "hasChat": "1234"
            }
        ]
    }
}

navbar.component.html

<a *ngFor="let mandant of mandanten;let i=index;" class="dropdown-item" (click)="selectedTeam = mandant.name; setTeamId(mandant);">

navbar.component.ts

setTeamId(team) {
  let teamId = team['team_id'];
  this.teamService.setTeamId(teamId);
}

your code looks good, it should be working, but I think its typo `data.response_payload.contacs` in here,may be it should be `data.response_payload.contacts` — Vivek Doshi, Aug 11 '19 at 18:24
@VivekDoshi Nice catch, but thats not the Problem. I have a typo in my Rest API response where its `contacs`, instead of `contacts`. Need to Fix it on my next backend Deploy, but here it doesnt matter — sHamann, Aug 11 '19 at 18:27
please provide the output of `data.response_payload.contacs`, what are you getting there? — Vivek Doshi, Aug 11 '19 at 18:28
please confirm that you are getting updated response ` this.contactList = data.response_payload.contacs;` with console log and its diffrent then what you are seeing in your html. — Vivek Doshi, Aug 11 '19 at 18:45
in that case your code must be working, there is no issue, please try to make sample on stackblitz, then I will be able to help you. — Vivek Doshi, Aug 11 '19 at 19:17
@sHamann Can you please let us know who/how `setTeamId` method of `SetTeamService` is called? Also `this.apiClientService.getAPIObject(param, "chat-room-list")` call returns a Promise or an Observable? — user2216584, Aug 11 '19 at 20:03
@user2216584 I added my navbar component which triggers the setTeamId. The `getAPIObject` returns an Promise — sHamann, Aug 11 '19 at 20:13
Could you try to track the *ngFor by yourselfe. Change your loop to *ngFor="let contact of contactList; let i = index;trackBy: tracker" and in your component.ts add the tracker tracker = (i, e) => { console.log('render'); return e; }; and check if the tracker fires up. Sorry, i have no idea how to format code in the comments :D — Sebastian Münster, Aug 11 '19 at 20:39
Your are also not declaring this.contactList in your components.ts. This should still work, but maybe it's causing trouble somehow. — Sebastian Münster, Aug 11 '19 at 20:41
@SebastianMünster The tracker doesnt trigger on the value Change — sHamann, Aug 11 '19 at 20:56
@sagat the mandanten value is set at `ngOnInit` from the Navbar component — sHamann, Aug 11 '19 at 20:58
The code as you have it here works fine: https://angular-w9nfkn.stackblitz.io , can you show the implementation of `getAPIObject`? — Daniel, Aug 11 '19 at 21:48
Looks like your navcomponent calls setTimeId method before the component subscribe to the service’ subject. Because of the nature of the Subject, it emits the values to all subscribers if value is smitten after the subscription. Can you try changing the Subject to BehaviorSubject. — user2216584, Aug 11 '19 at 22:10
The call to `getAPIObject` does not seem to take into account the new team id. What makes the api response to be different ? Where is `param` defined ? — Sergio Mazzoleni, Aug 12 '19 at 00:11

score 0 · Accepted Answer · answered Aug 12 '19 at 10:12

A lot of good questions in the comment Section and as a lot of people have suggested the code should work. And Yes it did.

But someone of my coworker changed the ChangeDetectionStrategy to onPush ...

https://angular.io/api/core/ChangeDetectionStrategy

*ngFor doesnt update on Value Change

1 Answers1