Объединение результатов в Angular

Question

У меня есть (в Angular 4) список продуктов (скажем, что у каждого продукта есть идентификатор и описание), который возвращается службой, а также корзина покупателя с идентификатором продукта и датой покупки.Я хотел бы отобразить список продуктов (ID, описание), для продуктов, находящихся в корзине покупателя, описание, выделенное жирным шрифтом, а также дату покупки.Так это будет выглядеть (например): 1 - Обувь 2 - Вино 3- Стиральная машина - 29.01.19 4 - Журнал

Как лучше всего подойти к этому?Должен ли я создать этот «расширенный список» продуктов в TypeScript или есть способ использовать угловые директивы?Спасибо за вашу помощь.

Answer 1

Не видя вашей конкретной реализации, я бы сделал что-то вроде этого:

<ul>
    <li *ngFor="let product in products" [ngClass]="{ 'bold' : inCart( product ) }" />
</ul>

А затем в вашем компоненте:

inCart( product : any ) : boolean {
    return this.cart.includes( product ); 
} 

А затем в CSS:

.bold {
    text-style: bold;
}