Javascript 如何使用Angular 7在html中显示相关数据

我是新来的。我试图用Angular 7在html端显示产品的颜色，但没有成功

我的桌子如下

产品

身份证

名字

颜色

身份证

名字

产品颜色关系

身份证

产品ID

彩色

在product.component.ts文件中，声明了产品变量

public product: Product;

在产品屏幕上，我试图用下面的代码显示产品的颜色

{{ product.ProductColorRelations[0].Name }}

但它不显示颜色的名称。我做错了什么

谢谢

试试这个：

product.ProductColorRelations[0].Color.Name

---

由于颜色的名称位于颜色数组中，因此您需要使用html编写，如下所示：

{{ product.ProductColorRelations[0].Color.Name }}

---

它会给你一个完美的结果。

因为你的数据是一系列产品，你可以用以下方法来实现

{{ products[0]?.ProductColorRelations[0]?.Color?.Name }}

但最好的选择是使用*ngFor遍历每个产品

---

因为问题不清楚打印控制台是否属于产品本身

有两种方法可以确保相同。在HTML中，您可以编写类似这样的内容，以确保产品中存在哪些数据

{{ product | json }}

它将帮助您查看产品对象中的内容

如果它是控制台中提到的产品对象

{{ product?.ProductColorRelations[0]?.Color?.Name }}

---

在Typescript'Please Console.logproduct和share@AdritaSharma，未捕获引用错误：控制台未定义在：1:1控制台。。洛卡斯c@ArifYILMAZ在角度分量ts代码中使用它，并向我们展示变量乘积中的示例数据

{{ product?.ProductColorRelations[0]?.Color?.Name }}