title: Saving multiple items to an array using ionic and asp.net core web api
body: <p>I am creating a shopping cart: How it works.</p>
  <ol>
  <li>A user adds or clicks an item(<strong>items.page</strong>)</li>
  <li>Then items are added on the <strong>Cart-modal.page</strong></li>
  <li>When the user opens <strong>Cart-modal.page</strong>, multiple items are added or displayed</li>
  </ol>
  <p>Problem: The array items on the <strong>Cart-modal.page</strong> I want to save them.</p>
  <p><strong>Class modal</strong></p>
  <pre><code> export class OrderItem {
       orderitemid: number;
       quantity: string;
       itemname: string;
       itemid: number;
   }
  </code></pre>
  <p><strong>OrderService</strong></p>
  <pre><code>export class OrderService {
    formData: Order;
    orderItems: OrderItem[];
  
    constructor(private http: HttpClient) {}
  
    PostOrder() {
      var body = {
        ...this.formData,
        OrderItem: this.orderItems,
      };
      return this.http.post(environment.apiURL + &quot;/OrderItem&quot;, body);
    }
  }
  </code></pre>
  <p><strong>item.page.ts</strong></p>
  <pre><code>export class ItemsPage implements OnInit {
    cart = [];
  
    public items = new Observable&lt;Item[]&gt;();
    cartItemCount: BehaviorSubject&lt;number&gt;;
  
    public currentSegment: string = &quot;All&quot;;
  
    @ViewChild(&quot;cart&quot;, { static: false, read: ElementRef }) fab: ElementRef;
  
    constructor(
      public cartService: CartService,
      private modalCtrl: ModalController,
      private router: Router,
      public navCtrl: NavController,
      private orderSevice: OrderService
    ) {}
  
    ngOnInit() {
      this.items = this.cartService.getProducts();
      this.cart = this.cartService.getCart();
      this.cartItemCount = this.cartService.getCartItemCount();
    }
  
    //start new//
    ionViewWillEnter() {
      this.loadContacts(this.currentSegment);
    }
  
    addToCart(product) {
      this.cartService.addProduct(product);
    }
  
    async openCart() {
      let modal = await this.modalCtrl.create({
        component: CartModalPage,
        cssClass: &quot;cart-modal&quot;,
      });
      modal.present();
    }
  }
  </code></pre>
  <p><strong>cart-modal.page.ts</strong></p>
  <pre><code>export class CartModalPage implements OnInit {
    cart: Item[] = [];
    formData: OrderItem;
  
    constructor(
      public cartService: CartService,
      private modalCtrl: ModalController,
      private alertCtrl: AlertController,
      private orderSevice: OrderService,
      private customerservice: CustomerService,
      private navParams: NavParams,
      private route: ActivatedRoute,
      private router: Router,
      public navCtrl: NavController
    ) {}
  
    ngOnInit() {
      this.cart = this.cartService.getCart();
    }
  
    decreaseCartItem(product) {
      this.cartService.decreaseProduct(product);
    }
  
    increaseCartItem(product) {
      this.cartService.addProduct(product);
    }
  
    removeCartItem(product) {
      this.cartService.removeProduct(product);
    }
  
    getTotal() {
      return this.cart.reduce((i, j) =&gt; i + j.price * j.quantity, 0);
    }
  
    close() {
      this.modalCtrl.dismiss();
    }
  
    //it must save array OrderItems here
    submitForm() {
      this.orderSevice.PostOrder().subscribe(
        async (res) =&gt; {
          console.log(&quot;working&quot;, res);
        },
  
        async (error) =&gt; {
          console.log(&quot;error&quot;, error);
        }
      );
    }
  }
  </code></pre>