Component can't read query parameters

My check out component doesn't loop through the query parameters like it should.

Upon submission of the form, it sends query parameters named checkouts:

shopping-cart.component.html

shopping-cart.component.ts

public checkOut(items: any) {
this.router.navigate(['check-out'], { queryParams: { checkouts: JSON.stringify(this.items) } });
}

Then the check out component is supposed to read the query parameters and print them out:

check-out.component.ts

crud.service.ts

check-out.component.html

Nothing gets printed out. The ngFor doesn't iterate over the query parameters like it should.

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Maureen Moore6y ago
I used this.myObject = JSON.parse(this.checkouts); and then looped over myObject instead of checkouts and it worked perfectly.
Maureen Moore6y ago
The constructor gets ActivatedRoute:
constructor(private crudService: CrudService, public router: Router, private route: ActivatedRoute, private dataService: DataService){ }