My RadListView is populated with data from an http request:
<RadListView #listView separatorColor="transparent"
pullToRefresh="true" (pullToRefreshInitiated)="refreshFavorites($event);" *ngIf="filteredItems && filteredItems.length; else noItems" row="2"
[items]="filteredItems" marginTop="-100" (touch)="dismissKeyboard($event)">
<ng-template let-item="item" let-i="index">
<GridLayout columns="10,*,10">
<GridLayout *ngIf="item" (tap)="goToInner(item)" [nsRouterLink]="['../favorite', item.ean]" pageTransition="slide" shadow='6' cornerRadius='5' col="1" columns="*,auto" class="p-8 m-b-8 m-x-8" borderRadius="8"
backgroundColor="white">
<GridLayout class="favorite-card" col="0" columns="150,*,auto" rows="auto,auto,auto">
<Image col="0" rowSpan="3" class="thumbnail m-r-12" stretch="aspectFit" *ngIf="item.images"
[src]="item.images.large.url"></Image>
<StackLayout col="1" row="1" verticalAlingment="center">
<Label class="h3 title m-t-4" marginBottom="0" textWrap="true" maxLines="2" [text]="item.productTitle"></Label>
<Label class="h5 caption" [text]="item.manufacturer"></Label>
</StackLayout>
</GridLayout>
<StackLayout col="1" verticalAlignment="top" (tap)="removeFromFavorites(item, i)">
<Image horizontalAlignment="right" src="~/images/favorite-active.png" width="20" height="20"></Image>
</StackLayout>
</GridLayout>
</GridLayout>
</ng-template>
</RadListView>
If I want to update the RadListView in inner.component and add an item to it:
filteredItems : ObservableArray<Observable> = new ObservableArray([]);
public update(item){
this.filteredItems.push(item)
}
However, when I try to add an item from another component, the RadListView does not get updated:
providers: [InnerComponent],
constructor(private inner: InnerComponent){}
addItem(item){
this.inner.update(item)
}
I am puzzled as to why my RadListView does not update after calling a function from another component, even though the items are identical in both components.