Looping through nested Typescript object angular

I am trying to loop and display the different shipping options on a TypeScript Object.

In this instance not all the shipping options are the same, one item allows you to have a wizard teleport it.

I want to load the shipping options no matter what they are. I thought I would be able to just *ngFor the shipping portion below but that didn't behave how I expected.

I attempted to use the key-value pipe but maybe I am just not understanding how I am supposed to implement this. When I run it any subsequent items after the first item won't display https://i.sstatic.net/EomJW.jpg am I supposed to not actually use .key and .value? that wouldn't be helpful since the keyvalue pair could be different.

      <div class="shippingOptions" *ngFor="let shipping of item.shipping | keyvalue">
             {{shippping.key}}, {{shipping.value}}
      </div>

as suggested, I created a stackblitz to bring more clarity to my code. https://stackblitz.com/edit/angular-ivy-cmqnxp?

Below is my code.

cart.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class CartService {
  constructor() { }

  items = [];

  // Adds items to the cart
  addToCart(product): void {
    this.items.push(product);
  }

  // returns the items from the cart
  getItems(): any[] {
    return this.items;
  }
}

Cart.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { Router } from '@angular/router';

import { productsList } from '../Classes/products';
import { CartService } from '../cart.service';

@Component({
  selector: 'app-cart',
  templateUrl: './cart.component.html',
  styleUrls: ['./cart.component.css']
})
export class CartComponent implements OnInit {
  items: any[];


  constructor( private cartService: CartService ){
    this.items = cartService.getItems();
  }
}

Cart.html

<div class="container">
    <h2>Cart</h2>
    <div class="cartProducts" *ngFor="let item of items">
        <!-- <input type="checkbox" name="deleteItem" id=""> -->
        <hr>
        <div class="item">
            <div class="itemImage">
                <img class="productImage" src="../../assets/images/phones/{{item.image}}" alt=""/>
            </div>
            <div class="information">
                <div class="description">
                    <!-- link to item -->
                    <a href="#" class="fakeLink">Link to Item Page</a>
                    <div class="shippingOptions" *ngFor="let shipping of item.shipping">
                        {{shipping}}
                    </div>
                </div>
                <div class="price">
                    {{item.price | currency}}
                </div>
            </div>
        </div>    
    </div>
</div>

Object product.ts

// Export is what allows me to use it externally as a module
export const productsList = [
    {
      name: 'Phone XL',
      price: 799,
      description: 'A large phone with one of the best screens',
      image: 'iphone-11-purple.webp',
      shipping: {
        threeDayGround: 3.99,
        nextDayAir: 12.99
      }
    },
    {
      name: 'Phone Mini',
      price: 699,
      description: 'A great phone with one of the best cameras',
      image: 'Space Gray-hero-zoom.webp',
      shipping: {
        threeDayGround: 4.99,
        nextDayAir: 10.99
      }
    },
    {
      name: 'Phone Standard',
      price: 299,
      description: 'Budget phone everyone can enjoy',
      image: 'Black-hero-zoom.webp',
      shipping: {
        nextDayAir: 12.99,
        wizardTeleport: 99.99
      }
    }
  ];

Below are the resources I accessed. Angular and TypeScript looping through object

Loop through nested object in angular

How to do ngFor loop on nested json object?

https://www.angularjswiki.com/angular/angular-keyvalue-pipe-loop-object-key-values-using-ngfor/

https://angular.io/api/common/KeyValuePipe

Thank you, any and all help is appreciated.