Html 根据*ngFor中的参数对对象进行特定分类

我的问题是由于缺乏使用angular2和HTML5的经验，所以请不要怪我； 我有一些食物类别如下：

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>

以下是他们的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>

但是，从逻辑上讲，它是这样的：

---

有什么帮助、指导或想法吗

正如@Sakuto在评论中所说，这与HTML或Angular无关，这是您的逻辑问题

您正试图通过使用*ngFor遍历所有项目来创建列表

您想要实现的是按类别创建不同的列表

您有两种解决方案，或者将数据更改为类别驱动而不是项目驱动，或者按类别对项目进行分组

因此，如果更改数据，对象将如下所示：

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>

然后在列表中，您可以这样做：

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>

---

如果您无法更改数据模型，只需在打印之前按类别对项目进行分组。

您的问题与角度无关，但与算法问题直接相关，您可以通过两种不同的方式完成：

从类别名称中检索订购的产品，然后只需检查前一个类别名称是否与当前类别名称不同，如果是，则打印类别名称，否则只打印产品。这里有一个伪代码的解释

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

    WRITE product
ENDFOR

第二种方法是，如果您不能对它们排序或不想排序，您可以创建一个新集合，其中每个类别都有其元素

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

---

你的问题是什么？所以我想把食物的观点按如下分类：。。。。第二张图片。这与Angular和HTML无关，它是纯算法。