Component can't read query parameters

Question

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

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

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

constructor(private crudService: CrudService){ }
ngOnInit() {
this.crudService.read_CheckOuts().subscribe(data => {
this.checkouts = data.map(e => {
return {
id: e.payload.doc.id,
isEdit: false,
thumbnail: e.payload.doc.data()['thumbnail'],
quantity: e.payload.doc.data()['quantity'],
product_name: e.payload.doc.data()['product_name'],
product_price: e.payload.doc.data()['product_price'],
};
})
});
}

crud.service.ts

read_CheckOuts() {
return this.firestore.collection('Checkouts').snapshotChanges();
}

check-out.component.html

<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(out.id)">Delete</a>
</div>
<ng-template #elseBlock>
</ng-template>
</div>

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