Angular 2按首字母分组对象数组答案

【问题标题】：Angular 2 Group array of objects by first letterAngular 2按首字母分组对象数组
【发布时间】：2018-06-06 17:59:27
【问题描述】：

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

我知道我可能需要一根管道，但我无法让它工作。

希望有人能帮忙

【问题讨论】：

@peter 我也在寻找相同的 .. 你能告诉我如何实现这个吗？

标签： javascript arrays angular grouping

【解决方案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进行更多检查，如果超过1个字符等..我只是提出了一个自定义管道的想法..希望它对你有所帮助

【讨论】：

【解决方案2】：

如果您不想使用管道，那么您可以使用 lodash 来更改对象数组的顺序。

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

创建一个元素数组，按通过每个迭代器运行集合中每个元素的结果按升序排序。此方法执行稳定排序，即保留相等元素的原始排序顺序。使用一个参数调用迭代器：（值）。

参数

collection (Array|Object)：要迭代的集合。 [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]]

【讨论】：

【解决方案3】：

您可以使用此管道按第一个字母对输入数组进行分组：

@Pipe({
  name: 'firstLetterGroupBy'
})
export class FirstLetterGroupBy implements PipeTransform {

  transform(input: any, prop: string): Array<any> {

    if (!isArray(input)) {
      return input;
    }

    const arr: { [key: string]: Array<any> } = {};

    for (const value of input) {
      const field: any = getProperty(value, prop);

      const firstLetter = field.charAt(0).toUpperCase();

      if (isUndefined(arr[firstLetter])) {
        arr[firstLetter] = [];
      }

      arr[firstLetter].push(value);
    }

    return Object.keys(arr).map(key => ({ key, 'value': arr[key] }));
  }
}

然后：

<div *ngFor="let item of yourArray | firstLetterGroupBy:'name'">
   <span>{{item.key}}</span>
   <ul>
       <li *ngFor="let v of item.value">
       {{v.name}}
       <hr>
       </li>
   </ul>
</div>

【讨论】：