根据* ngFor中的参数的特定类型的对象

时间:2016-12-15 10:29:32

标签: html5 algorithm loops angular ngfor

我的问题是由于缺乏angular2和HTML5的经验造成的,所以请不要责怪我;) 我有一些这样的食物类别:enter image description here

这是他们的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(在每个食物对象中作为对象参数说明),所以我希望食物的观点将按照这样的类别排序:{{3} }

我在*ngFor循环中添加了这些行:

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

但是,从逻辑上讲,它看起来像这样:

enter image description here

任何帮助或指导或想法请?

2 个答案:

答案 0 :(得分: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>

如果您无法更改数据模型,只需按类别对项目进行分组即可打印&#34;它

答案 1 :(得分:1)

您的问题与Angular无关,但它与算法问题直接相关,您可以通过两种不同的方式完成:

  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