Eine bestimmte Art von Gegenständen nach einem Parameter innerhalb * ngFor

Question

Mein Problem wird durch einen Mangel an Erfahrung mit angular2 und HTML5 verursacht so die Schuld nicht mit mir bitte;) ich so einige Lebensmittelkategorien haben:

Hier ihre HTML ist:

<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> 

Jede dieser Arten von Lebensmitteln gehört zu einer category (als Objektparameter in jedem Lebensmittel Objekt dargestellt), also ich möchte, dass die Ansicht von Lebensmitteln wird wie diese nach Kategorien geordnet werden:

Ich habe diese Zeilen in der *ngFor Schleife:

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

Aber -und logically-, es so erschien:

Hilfe oder Anleitung oder Ideen Bitte?

Answer 1

Wie @Sakuto sagte in den Kommentaren, dies ist nicht im Zusammenhang mit HTML oder Angular, es ist ein Problem in Ihrer Logik.

Sie versuchen, eine Liste durch Iterieren mit *ngFor durch alle Elemente zu erstellen.

Sie möchten verschiedene Listen nach Kategorien erstellen.

Sie haben 2 Lösungen, oder Sie ändern Ihre Daten, um kategorisiert zu werden, anstatt Artikel zu steuern, oder Sie gruppieren Ihre Artikel nach Kategorie.

Also, wenn Sie Ihre Daten ändern, Ihr Objekt würde wie folgt aussehen:

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

Und dann auf der Liste, die Sie so etwas tun:

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

Wenn Sie nicht in der Lage sind Um Ihr Datenmodell zu ändern, gruppieren Sie Ihre Artikel einfach nach Kategorie, bevor Sie sie "drucken".

Answer 2

Ihr Problem ist nicht auf Angular verwandt, aber es ist direkt mit einem Algorithmus Problem zu tun, was Sie wollen, können Art und Weise in zwei differents erfolgen:

1. Rufen Sie die Produkte bt dem Kategorienamen geordnet, dann überprüfen Sie einfach Wenn sich der vorherige Kategoriename von dem aktuellen unterscheidet, wenn ja, drucken Sie den Kategorienamen, andernfalls drucken Sie einfach das Produkt. Hier ist eine Erklärung im Pseudocode.

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

2. Zweite Art und Weise, wenn Sie diese nicht bestellen können oder wollen nicht, Sie könnten nur eine neue Sammlung erstellen, wobei jede Kategorie sein Element haben würde.

   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