Конкретный вид объектов в соответствии с параметром в пределах * ngFor

Question

Моей проблемы вызван отсутствием в опыте с angular2 и HTML5, так что не вините меня, пожалуйста;) у меня есть некоторые категории продуктов питания, как это:

Здесь их HTML:

<div 
    *ngFor="let item of items; let i = index" 
    class="col-lg-4 col-md-6 lc-reset-padding-v" 
> 
    <md-card> 
    <md-card-title-group> 
     <md-card-title layout="row" layout-align="end center"> 
     <div class="md-card-title-media inline"> 
      <img 
      alt="{{item.picture.alt}}" 
      title="{{item.picture.title}}" 
      src="{{page_items_url + item.picture.public_id}}" 
      > 
     </div> 
     <div class="md-card-title-text inline"> 
      <span class="md-headline inline">{{item.name}}</span> 
      <span *ngIf="item?.internal_reference"> 
      <p class="md-headline-reference"> 
      {{'ref' | translate}}: {{item.internal_reference | truncate : 22}} 
      </p> 
      </span> 
      <span *ngIf="item?.description"> 
      <p class="md-subhead">{{item.description | truncate : 100}}</p> 
      </span> 
      <span 
      *ngIf="page?.advanced" 
      class="label label-pill item-type text-capitalize"> 
      {{item.item_type || 'no type for this '}} item 
      </span> 
     </div> 
     <div *ngIf="item.out_of_stock" class="ribbon"> 
      <span>{{'notAvailable' | translate}}</span> 
     </div> 
     <span class="price"> 
      {{item.price | currency: item.official_currency:true:'1.2-3'}} 
     </span> 
     </md-card-title> 
    </md-card-title-group> 
    </md-card> 
</div> 

Каждый из этих видов пищевых продуктов относится к category (на примере в качестве параметра объекта в каждом объекте пищи), поэтому я хочу, чтобы Вид продуктов будут отсортированы по категориям, как это:

Я добавил эти строки внутри цикла *ngFor:

<h3 class="text-muted text-uppercase title-container"> 
        {{item.category.name}} 
     </h3> 

Но -И logically-, оказалось, как это:

помощь или руководство или идеи, пожалуйста?

Answer 1

Как @Sakuto в комментариях, это не связано с HTML или Angular, это проблема в вашей логике.

Вы пытаетесь создать список, итерации с помощью *ngFor через все элементы.

Вы хотите создать различные списки по категориям.

У вас есть 2 решения, или вы изменяете свои данные, чтобы они управлялись по категориям, а не элементы, управляемые элементами, или группируйте свои предметы по категориям.

Так что, если вы измените ваши данные, ваш объект будет выглядеть примерно так:

interface FoodList { 
    categories: Category[]; 
} 
interface Category { 
    name: string; 
    items: FoodItem[]; 
} 
interface FoodItem { 
    //your item 
} 

, а затем в списке вы делаете что-то вроде этого:

<div *ngFor="let category of yourCategories"> 
    <h5>{{category.name}}</h5> 
    <div *ngFor="let item of category.items"> 
     {{item.name}} 
     <!-- your item template --> 
    </div> 
</div> 

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

Answer 2

Ваша проблема не связан с Угловым, но это напрямую связанно с проблемой алгоритма, что вы хотите, может быть сделаны два дифферента образом:

1. Получить продукты заказанных Б.Т. названия категории, то просто проверить если имя предыдущей категории отличается от текущего, если да, напечатайте название категории, иначе просто распечатайте продукт. Вот объяснение в псевдокоде.

   var currentCategoryName = ""; 
   FOR product in products 
       IF product.categoryName != currentCategoryName 
        WRITE product.categoryName 
       ENDIF 
   
       WRITE product 
   ENDFOR 
   

2. Второй способ, если вы не можете заказать их или не хотите, вы можете просто создать новую коллекцию, где каждая категория будет иметь свой элемент.

   var yourList = []; 
   
   FOR product in products 
       yourList[product.categoryName][] = product 
   ENDFOR 
   
   // Display 
   FOR category in yourList 
       WRITE category[0].categoryName 
   
       FOR product in category 
        WRITE product 
       ENDFOR 
   ENDFOR