I am facing an issue with my Ionic application. I have created a component to display data of an object, but the problem is that when I update the data in the parent component, the changes are not reflected in the child component:
my-card.component.ts
@Component({
selector: 'my-card',
templateUrl: './my-card.html'
})
export class MyCard {
@Input('item') public item: any;
@Output() itemChange = new EventEmitter();
constructor() {
}
ngOnInit() {
// Performing an AJAX call here to fetch more data and populate additional fields in the item.
this.getMoreData().subscribe(data => {
if (data.item){
this.item = data.item;
}
this.itemChange.emit(this.item);
});
}
}
my-card.html
<div class="comment-wrapper" *ngFor="let subitem of item.subitems">
{{subitem.title}}
</div>
In the parent component, I use the child component like this:
<my-card [(item)]="item"></my-card>
Here is the ts file for the parent component:
@IonicPage()
@Component({
selector: 'page-one',
templateUrl: 'one.html',
})
export class OnePage {
public item = null;
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.item = {id:1, subitems:[]};
}
addSubItem():void{
// Making an AJAX call to save the new item to the database and retrieve the new subitem.
this.addNewSubItem().subscribe(data => {
let newSubItem = data.item;
this.item.subitems.push(newSubItem);
}
}
}
However, when I call the addSubItem() function, the component does not update and the ngFor loop still does not display anything.