Modal controller return object data and object data show in html


#1

html

<ion-list *ngFor="let feedback_list of product.user_feedback">
	<ion-item *ngIf="feedback_list.full_name">
		<ion-avatar item-start>
			<img src="assets/img/person.png">
		</ion-avatar>
		<h2>{{feedback_list.full_name}}</h2>
		<p>{{feedback_list.created_date}}</p>
		<ion-note item-end>
			<ion-icon *ngIf="feedback_list.rating<=4" name="star-outline"></ion-icon>
		</ion-note>
	</ion-item>
	<ion-card-content *ngIf="feedback_list.full_name">
		<p>{{feedback_list.feedback}}</p>
	</ion-card-content>
</ion-list>

ts

openFeedbackModal() {
	let modal = this.modalCtrl.create(ModalContentPage);
	modal.onDidDismiss(data => {
		for (let products of data) {
			this.feedback_list.push(data)
		}
	});
	modal.present();
}

Data console mode:

html view

please any body help. How do i keep as first feedback. Thanks in advanced


#2

It’s good that you’ve shared your code and screen shots, but you need to describe your question in more detail, it’s not very clear right now. Tell us exactly what are you trying to achieve, what have you tried till now to do that, what is the result and what error if any you are experiencing etc.


#3

I want to show object data as feedback like below screen shot. New feedback will be first here.

i am using below typescript code where data is coming from modal controller.

modal.onDidDismiss(data => {
		for (let products of data) {
			this.feedback_list.push(data);
		}
	});

html code below:

<ion-list *ngFor="let feedback_list of product.user_feedback">
	<ion-item *ngIf="feedback_list.full_name">
		<ion-avatar item-start>
			<img src="assets/img/person.png">
		</ion-avatar>
		<h2>{{feedback_list.full_name}}</h2>
		<p>{{feedback_list.created_date}}</p>
		<ion-note item-end>
			<ion-icon *ngIf="feedback_list.rating<=4" name="star-outline"></ion-icon>
		</ion-note>
	</ion-item>
	<ion-card-content *ngIf="feedback_list.full_name">
		<p>{{feedback_list.feedback}}</p>
	</ion-card-content>
</ion-list>

There is no error but feedback is not showing like image.


#4

If I am not wrong, are you expecting that pushing data into the feedback_list array in the modal (or anywhere else for that matter) will dynamically add the new object into the DOM?? That’s not how the data binding work in Ionic, if that’s what you are betting on. You need to understand that by the time you are dealing with the modal, the *ngFor has run a long time ago when the page itself was loaded and we can not add into the DOM just like that. So, either you’ve to somehow persist that returned data from the modal and refresh the page with the new list. Or, you can try hacking a bit and add dynamically to the DOM, I am afraid I do not know about the right way to do that (or whether there is any right way for that at all).


#5

This code is really confusing because there is both a template variable and a controller property both named feedback_list, and one of them doesn’t seem to be a list at all.


#6

this feedback like below image that i have already loaded:


#7

Thanks for your reply. I have solved this problem using ionViewDidEnter.


#8

Oh that’s great then! Actually your question was a little confusing so I perhaps misunderstood what you were trying to do. But if it’s working for you then that’s a good thing :+1: