Angular 2按對象排列組的第一個字母

Question

我對Angular 2比較新，我需要根據對象名的第一個字母對對象數組進行排序/分組。例如：

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

我想它表現出來，如：

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

我發現這個職位：How to group data in Angular 2 ?。

我試了一下，如：

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

我知道我可能需要一個管道，但我不能讓它的工作。

希望有人能幫助

Answer 1

嗨你嘗試過，也許財產以後這樣的：

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 : ""; 
    } 
} 

也許你可以把字符串value更多的檢查，如果爲超過100字符等..我只是把一個想法自定義管道..希望它可以幫助你

Answer 2

如果你不想使用管道，那麼你可以使用lodash改變對象數組的順序。

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

創建元件的陣列，由一個集合通各iteratee中運行的每個元件的結果，按升序排序。此方法執行穩定的排序，即保留相同元素的原始排序順序。迭代被調用一個參數：（value）。

參數

集合（陣列|對象）：集合遍歷。 [iteratees = [_。identity]]（...（Function | Function []））：按迭代排序。

返回

(Array):返回新的數組排序。

例

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