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:


<form [formGroup]="submitForm" (ngSubmit)="checkOut(items)">
<input type="submit" value="Check Out">


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:


constructor(private crudService: CrudService, public router: Router, private route: ActivatedRoute, private dataService: DataService){ }  
 ngOnInit() {
  this.route.queryParams.subscribe(params => {
    this.checkouts = params['checkouts'];
	      console.log("check-outs in subscribe " + this.checkouts);//shows array
		 console.log("Product name in subscribe " + this.checkouts.product_name);//shows undefined
  });   });


    <div class="card" *ngFor="let out of checkouts">
        <div class="card-body" *ngIf="!out.isEdit; else elseBlock">
          <h5>Product Name: {{out.product_name}}</h5>
          <h6>quantity: {{out.quantity}} </h6>
          <p class="card-text">Price: {{out.product_price}}</p>
          <a href="#" class="card-link" (click)="RemoveCheckoutRecord(">Delete</a>
        <ng-template #elseBlock>

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

I edited my post and now I get the error: Cannot find a differ supporting object ‘[{“id”:1,“thumbnail”:“product-2.gif”,“quantity”:2,“product_name”:“Adult Female Bike”,“product_price”:20.5},{“id”:3,“thumbnail”:“product-4.gif”,“quantity”:3,“product_name”:“Adult Unisex Helmet”,“product_price”:4}]’ of type ‘string’. NgFor only supports binding to Iterables such as Arrays.

I used this.myObject = JSON.parse(this.checkouts); and then looped over myObject instead of checkouts and it worked perfectly.