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.