Как отобразить связанные данные в HTML с Angular 7

Question

Я новичок в Angular 7. Я пытаюсь отобразить цвет продукта на html стороне с Angular 7, но у меня ничего не получилось.

Мои таблицы похожи ниже;

Продукт

Id

Имя

цвет

Id

Имя

ProductColorRelation

Id

PRODUCTID

ColorId

В файле product.component.ts объявлена ​​переменная продукта

public product: Product;

На экране продукта я пытаюсь отобразить цвета продукта с кодом ниже

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

Но он не отображает название цвета. Что я тут не так делаю?

Спасибо

Answer 1

Поскольку имя цвета находится в массиве цветов, вам нужно написать в HTML, как это:

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

и он даст вам идеальный результат.

Answer 2

Поскольку ваши данные представляют собой массив продуктов, вы можете сделать это следующим образом

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

Но лучшим вариантом является циклический просмотр каждого продукта с помощью *ngFor

<div *ngFor="let product of products">
   {{ product?.ProductColorRelations[0]?.Color?.Name}}
</div>

Answer 3

Попробуйте это:

product.ProductColorRelations[0].Color.Name

Answer 4

Поскольку вопрос неясен, относится ли печатная консоль к самому продукту.

Есть два способа убедиться в этом.В своем HTML вы можете написать что-то вроде этого, чтобы убедиться, что данные присутствуют в продукте.

{{ product | json }}

Это поможет вам увидеть, что происходит в вашем объекте продукта.

Еслитогда это объект продукта, упомянутый в консоли,

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