Why is my checkoutData object not initializing properly?-CodePudding

I have the following data object:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class CheckoutData {
    email:string;
    firstName:string;
    lastName:string;
    deliveryMethod: "Standard";
    paymentMethod: "Credit Card";
}

I inject the object in the constructor of my component and log it to the console:

constructor(
    private store: Store<{ checkoutStore; cartState }>,
    public checkoutData:CheckoutData    
  ) {
    console.log('checkoutData constructor', this.checkoutData)
  }

It logs garbage instead of the instantiated data object:

checkoutData constructor s {}[[Prototype]]: Object

Selecting radio buttons in my view than stores garbage in the data object:

 <div >
     <input  type="radio" id="formCheck-3" name="paymentMethod"
         [(ngModel)]="checkoutData.paymentMethod" #paymentMethod=ngModel 
         (change)="saveCheckoutData()"
         [value]="paymentMethod">
         <label  for="formCheck-3" style="font-size: 
         14px;">PayPal</label>
      </div>

CodePudding user response：

All I can see is a typo in ur class.

Should be

export class HelloService {
  email: string;
  firstName: string;
  lastName: string;
  deliveryMethod = 'Standard'; //typo
  paymentMethod = 'Credit Card'; //typo
}

stackblitz