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

Question

I am trying to display array inside of an object in HTML. My sample JSON is like below...

I would like to display Product > ProductCategoryRelations > Category.Name in a string comma separeted like "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"
                }
        }
    ],

How can I put all categories name in a string comma seperated?

What I have so fas is like below but it doesnt worrk

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

Answer 1

In javascript, you would need this:

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

to put it in context:

 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(',') ); 

Now you can use .join(',') in Angular template syntax, but you cannot use the .map() bit. So I suspect the easiest way would be to add a utility function to your component that does this for you:

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

and then do it in the template like this:

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

If you need to do the same thing in multiple places in your app across multiple components, then I would recommend writing your own custom pipe .