前端对象为空（使用 ngFor）但出现在 console.log 中

我正在做一个教程课程，我被困在这部分，我想显示出现在 console.log 但不在网页上的产品的属性。令人困惑的部分是 console.log 正确显示了产品，而不是前端。

这是 HTML 前端：

<div class="grid mb-5" *ngFor="let orderItem of order.orderItems">
        <div class="col-2">{{ orderItem.product?.name }}</div>
        <div class="col-2">{{ orderItem.product?.brand }}</div>
        <div class="col-2">{{ orderItem.product?.category?.name }}</div>
        <div class="col-2">{{ orderItem.product?.price | currency }}</div>
        <div class="col-2">{{ orderItem.quantity }}</div>
     </div> 

这是订单TS

/* eslint-disable @typescript-eslint/no-explicit-any */
import { User } from '@eshop-repository/users';
import { OrderItem } from './order-item';

export class Order {
  
  id?: string;
  orderItems?: OrderItem[];
  shippingAddress1?: string;
  shippingAddress2?: string;
  city?: string;
  zip?: string;
  country?: string;
  phone?: string;
  status?: number;
  totalPrice?: string;
  user?: User;
  dateOrdered?: string;
  _id?: string;
  
}

这是订单项目 TS 的代码：

/* eslint-disable @nrwl/nx/enforce-module-boundaries */
import { Product } from "@eshop-repository/products";

export class OrderItem {
    product?: Product;
    quantity?: number;
  }

型号：

const mongoose = require ('mongoose');

const orderSchema = mongoose.Schema ({

    orderItems: [{
        type: mongoose.Schema.Types.ObjectId,
        ref: 'OrderItem', 
        required: true
    }],
    shippingAddress1: {
        type: String, 
        required: true,
    },
    shippingAddress2: {
        type: String,
    },   
    city: {
        type: String,
        required: true, 
    },
    zip: {
        type: String,
        required: true, 
    },
    country: {
        type: String,
    },
    phone: {
        type: String,
        required: true, 
    },
    status: {
        type: String,
        required: true, 
        default: 'Pending',
    },
    totalPrice: {
        type: Number,
    },
    user: {
        type: mongoose.Schema.Types.ObjectId,
        ref: 'User',
    },
    dateOrdered: {
        type: Date, 
        default: Date.now,
    }
})
orderSchema.virtual('id').get(function() {
    return this._id.toHexString();
}); 
orderSchema.set('toJSON', {
    virtuals: true,
}); 
exports.Order = mongoose.model('Order', orderSchema); 

路线：

router.get(`/:id`, async (req, res) => {
    
    let order = await Order.findById(req.params.id)
    .populate('user', 'name') 
    .populate('orderItems') 
   if(!order) {
        res.status(500).json({success: false})
    }
    res.send (order);
})

订单项目的Schemda：

const mongoose = require ('mongoose');

const orderItemSchema = mongoose.Schema ({

quantity: {
    type: Number, 
    required: true
}, 
product: {
    type: mongoose.Schema.Types.ObjectId, 
    ref: 'Product'   
}
    
})

根据截图，可以清楚的看到产品只包含一个字符串。但是您将其视为对象并尝试在

ngFor