Component can't read query parameters

Oct 5 2020 4:23 PM
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
  1. <form [formGroup]="submitForm" (ngSubmit)="checkOut(items)">  
  2. <input type="submit" value="Check Out">  
  3. </form>  
shopping-cart.component.ts
  1. public checkOut(items: any) {  
  2. this.router.navigate(['check-out'], { queryParams: { checkouts: JSON.stringify(this.items) } });  
  3. }  
Then the check out component is supposed to read the query parameters and print them out:
check-out.component.ts
  1. constructor(private crudService: CrudService){ }  
  2. ngOnInit() {  
  3. this.crudService.read_CheckOuts().subscribe(data => {  
  4. this.checkouts = data.map(e => {  
  5. return {  
  6. id: e.payload.doc.id,  
  7. isEdit: false,  
  8. thumbnail: e.payload.doc.data()['thumbnail'],  
  9. quantity: e.payload.doc.data()['quantity'],  
  10. product_name: e.payload.doc.data()['product_name'],  
  11. product_price: e.payload.doc.data()['product_price'],  
  12. };  
  13. })  
  14. });  
  15. }  
crud.service.ts
  1. read_CheckOuts() {  
  2. return this.firestore.collection('Checkouts').snapshotChanges();  
  3. }  
check-out.component.html
  1. <div class="card" *ngFor="let out of checkouts">  
  2. <div class="card-body" *ngIf="!out.isEdit; else elseBlock">  
  3. <h5>Product Name: {{out.product_name}}</h5>  
  4. <h6>quantity: {{out.quantity}} </h6>  
  5. <p class="card-text">Price: {{out.product_price}}</p>  
  6. <a href="#" class="card-link" (click)="RemoveCheckoutRecord(out.id)">Delete</a>  
  7. </div>  
  8. <ng-template #elseBlock>  
  9. </ng-template>  
  10. </div>  
Nothing gets printed out. The ngFor doesn't iterate over the query parameters like it should.

Answers (2)