出现在 console.log 中"/>
前端对象为空(使用 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
中使用其属性
更多推荐
前端对象为空(使用 ngFor)但出现在 console.log 中
发布评论