Angular 7 - Как отобразить массив внутри объекта в HTML

Question

Я пытаюсь отобразить массив внутри объекта в HTML. Мой образец JSON, как показано ниже ...

Я хотел бы отобразить Product> ProductCategoryRelations> Category.Name в виде строковой запятой, разделенной как «Категория 1, Категория 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(',')
);

Теперь вы можете использовать .join(',') в синтаксисе угловых шаблонов, но вы не можете использовать бит .map(). Поэтому я подозреваю, что самым простым способом было бы добавить в ваш компонент служебную функцию, которая сделает это за вас:

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

и затем сделайте это в шаблоне так:

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

Если вам нужно сделать одно и то же в нескольких местах вашего приложения на нескольких компонентах, я бы порекомендовал написать свой собственный конвейер .