Angular 2 Group Array von Objekten nach dem ersten Buchstaben

Question

Ich bin relativ neu in Angular 2 und ich muss ein Array von Objekten auf der Grundlage des ersten Buchstabens ihres Namens sortieren/gruppieren. zB .:

{ 
    "type": "fruit", 
    "name": "apple", 
}, 
{ 
    "type": "fruit", 
    "name": "banana", 
}, 
{ 
    "type": "vegetable", 
    "name": "broccoli", 
}, 
{ 
    "type": "fruit", 
    "name": "orange", 
}, 

Ich möchte es, es zeigen mag:

<h3>A</h3> 
<ul> 
    <li>apple</li> 
</ul> 
<h3>B</h3> 
<ul> 
    <li>banana</li> 
    <li>broccoli</li> 
</ul> 
<h3>O</h3> 
<ul> 
    <li>orange</li> 
</ul> 

Ich fand diesen Beitrag: How to group data in Angular 2 ?.

Ich habe versucht, es wie:

<div *ngFor="let item of food | groupBy:'name.charAt(0)'"> 
    <h3>{{name.charAt(0) | uppercase}}</h3> 
    <li>...</li> 
</div> 

Ich weiß, ich brauche wahrscheinlich ein Rohr, aber ich kann es an die Arbeit.

Hoffnung jemand

Answer 1

Hallo helfen können, haben Sie versucht, vielleicht somthing wie:

import { Pipe, PipeTransform } from '@angular/core'; 
/* 
* Raise the value exponentially 
* Takes an exponent argument that defaults to 1. 
* Usage: 
* value | firstLetter:'a' 
* Example: 
* {{ 'banana' | firstLetter:'b'}} 
* 
*/ 
@Pipe({ name: 'firstLetter' }) 
export class ExponentialStrengthPipe implements PipeTransform { 
    transform(value: string, letter: string): string { 
     if (!value || !letter) return value; 
     return value.charAt(0).indexOf(letter) > -1 ? value : ""; 
    } 
} 

Vielleicht können Sie mehr Kontrolle über Zeichenfolge value wenn da mehr als 1 Zeichen etc ..i nur eine Idee setzen setzen von benutzerdefinierten Rohr .. hoffe, es hilft Ihnen

Answer 2

Wenn Sie nicht Rohr verwenden möchten, dann können Sie Lodash für die Reihenfolge Ihrer Array von Objekten ändern.

_.sortBy(collection, [iteratees=[_.identity]]) 

Erzeugt eine Anordnung von Elementen, in aufsteigender Reihenfolge durch die Ergebnisse sortiert thru jedes iteratee jedes Element in einer Auflistung der Ausführung. Diese Methode führt eine stabile Sortierung durch, dh sie behält die ursprüngliche Sortierreihenfolge gleicher Elemente bei. Die Iterate werden mit einem Argument aufgerufen: (Wert).

Argumente

Sammlung (Array | Object): Die Sammlung überlaufen. [iteratees = [_. Identity]] (... (Funktion | Funktion [])): Die iteratees, nach denen sortiert werden soll.

Returns

(Array): Gibt die neue sortiertes Array.

Beispiel

var users = [ 
    { 'user': 'fred', 'age': 48 }, 
    { 'user': 'barney', 'age': 36 }, 
    { 'user': 'fred', 'age': 40 }, 
    { 'user': 'barney', 'age': 34 } 
]; 

_.sortBy(users, [function(o) { return o.user; }]); 
// => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]] 

_.sortBy(users, ['user', 'age']); 
// => objects for [['barney', 34], ['barney', 36], ['fred', 40], ['fred', 48]]