Angular 7-如何在HTML中显示对象内部的数组

我试图在HTML中显示对象内部的数组。我的JSON示例如下所示

我想用逗号分隔的字符串显示Product>ProductCategoryRelations>Category.Name，如“Category 1，Category 2”

如何将所有类别名称放在逗号分隔的字符串中

我现在的情况如下，但它不起作用

<dd class="col-sm-9" *ngFor="let category of product.ProductCategoryRelations">
  <span>{{category.Name}}</span>
</dd>

{{category.Name}

在javascript中，您需要：

product.ProductCategoryRelations
.map（r=>r.Category.Name）
.join（“，”）

把它放在上下文中：

让产品={
“Id”：2，
“名称”：“产品1”，
“产品类别关系”：[
{
“Id”：3，
“ProductId”：2，
“类别”2，
“主动”：正确，
“类别”：{
“Id”：2，
“家长ID”：1，
“名称”：“类别1”
}
},
{
“Id”：4，
“ProductId”：2，
“类别”2，
“主动”：正确，
“类别”：{
“Id”：2，
“家长ID”：1，
“名称”：“第2类”
}
}
],
};
console.log(
product.ProductCategoryRelations
.map（r=>r.Category.Name）
.join（“，”）
);在javascript中，您需要：

product.ProductCategoryRelations
.map（r=>r.Category.Name）
.join（“，”）

把它放在上下文中：


让产品={
“Id”：2，
“名称”：“产品1”，
“产品类别关系”：[
{
“Id”：3，
“ProductId”：2，
“类别”2，
“主动”：正确，
“类别”：{
“Id”：2，
“家长ID”：1，
“名称”：“类别1”
}
},
{
“Id”：4，
“ProductId”：2，
“类别”2，
“主动”：正确，
“类别”：{
“Id”：2，
“家长ID”：1，
“名称”：“第2类”
}
}
],
};
console.log(
product.ProductCategoryRelations
.map（r=>r.Category.Name）
.join（“，”）
);
<dd class="col-sm-9" *ngFor="let category of product.ProductCategoryRelations">
  <span>{{category.Name}}</span>
</dd>