Question

我正在尝试在HTML对象中显示数组。我的示例JSON如下所示...

我想显示产品> ProductCategoryRelations> Category.Name，以逗号分隔，例如“ Category 1，Category 2”

[
  {
    "Id": 2,
    "Name": "Product 1",
    "ProductCategoryRelations": [
        {
                "Id": 3,
                "ProductId": 2,
                "CategoryId": 2,
                "Active": true,
                "Category": {
                        "Id": 2,
                        "ParentId": 1,
                        "Name": "Category 1"                    
                }
        },
        {
                "Id": 4,
                "ProductId": 2,
                "CategoryId": 2,
                "Active": true,
                "Category": {
                        "Id": 2,
                        "ParentId": 1,
                        "Name": "Category 2"
                }
        }
    ],

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

我有这样的常识，如下所示，但它并不担心

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

Answer 1

在javascript中，您将需要以下内容：

product.ProductCategoryRelations
        .map(r => r.Category.Name)
        .join(',')

将其放在上下文中：

let product = {
                "Id": 2,
                "Name": "Product 1",
                "ProductCategoryRelations": [
                        {
                                "Id": 3,
                                "ProductId": 2,
                                "CategoryId": 2,
                                "Active": true,
                                "Category": {
                                        "Id": 2,
                                        "ParentId": 1,
                                        "Name": "Category 1"                    
                                }
                        },
                        {
                                "Id": 4,
                                "ProductId": 2,
                                "CategoryId": 2,
                                "Active": true,
                                "Category": {
                                        "Id": 2,
                                        "ParentId": 1,
                                        "Name": "Category 2"
                                }
                        }
                ],
};

console.log(
  product.ProductCategoryRelations
    .map(r => r.Category.Name)
    .join(',')
);

现在，您可以在Angular模板语法中使用.join(',')，但是不能使用.map()位。因此，我怀疑最简单的方法是在您的组件中添加一个实用程序功能来为您执行此操作：

getCategoryNames(product) {
  return product.ProductCategoryRelations.map(r => r.Category.Name);
}

，然后在模板中执行以下操作：

{{getCategoryNames(product).join(',')}}

如果您需要跨多个组件在应用程序中的多个位置执行相同的操作，则建议使用writing your own custom pipe。

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

1 个答案: