Values not updating after event emit

I've a simple PrimeNg dropdown in a component which shows some items.

topnavbar.component.html

<my-dropdown
[products]="productItems"
[tables]="tableItems"
></my-dropdown>


tableItems and productItems are arrays that gets their values from an API call:

topnavbar.component.ts

getMyList = (params1: string, params2: string) => {
this.someService
.getNavList(params1, params2)
.subscribe({
next: (resp) => {
resp.data[0].forEach((item: any) => {
this.tableItems.push({
name: item.name,
url: item.url,
});
});
},
error: (HttpResponse: HttpErrorResponse) => {},
});
};

constructor(
...
private _eventEmitter: RouteEventEmitService
) {
this._eventEmitter.getTableNameEmitter.subscribe((data: any) => {
console.log('data', data);
this.tableItems = [];

data.data[0].levels.forEach((item: any) => {
this.tableItems.push({
name: item.name,
url: item.url,
});
});
});
}


In some other component i make a button click and fetch new list and pass on the new list view emit to this topnavbar component.

sidenavigation.component.ts

buttonClicked = (params: any, params1: string) => {
this.sidenavService
.myMethod(params, params11)
.subscribe({
next: (resp) => {
this._eventEmitter.getTableNameEmitter.emit(resp);
},
error: (HttpResponse: HttpErrorResponse) => {},
});
};


Even then i still see the old list. Why the list is not updated. The event emitter is sending the updated list i verfied. Please help.

Continue reading...