在Angular 5中按对象值分组

Question

我需要显示按某些类别分组的数据。问题是类别的名称是查询中的值，而不是对象键。

这是查询：

getTools() {
return this.adalSrv.get(
  environment.endpoints_sharepoint,
  environment.endpoints_sharepoint
  + environment.environment_sharepoint_extension + '/_api/Web/lists/getbytitle(\'Herramientas\')/items?$filter=(Tipo_x0020_de_x0020_Herramienta eq \'Web\')&$select=ID,Configuracion,Descripcion,Title,URLEnlace,CategoriaHerr/Title&$expand=CategoriaHerr/Title'
).map(tools => tools.d.results.map(item => {
  return new Object({
    id: item.Id,
    title: item.Title,
    desc: item.Descripcion,
    cat: item.CategoriaHerr.Title,
    link: item.URLEnlace,
    src: {
      path: JSON.parse(item.Configuracion).IconoHer.path,
      fichero: JSON.parse(item.Configuracion).IconoHer.fichero
      },
    str1: item.Title.charAt(0),
    str2: item.Title.charAt(1),
  });
}));
}

这是我订阅时收到的：Console.log

我需要像这样显示它：

<div class="tools-category">
  <h3>{{cat}}</h3>
  <div class="tools-by-cat">
  <div *ngFor="let tool of tools" class="tool-item"><p>{{nameTool}}</p></div>
  </div>
</div>

我的意思是，所有工具按类别分组在不同的div中。

我正在尝试在另一个ngFor里面做一个ngFor ...但是得到了很多空的div。

Answer 1

您的代码有几个问题：

1. 你的css类在引号之外
2. 您没有正确访问循环的值

检查以下代码是否可以解决您的问题。如果没有，请使用您的组件的更多代码调整您的问题（最好是在工作的stackblitz），我会相应地更新我的答案：

<h3>{{cat}}</h3>
<div class="tools-by-cat">
  <div *ngFor="let tool of tools" class="tool-item"><p>{{tool.cat}}</p></div>
</div>

EDIT

AFAIK angular目前不支持开箱即用的分组，但有一个名为ngx-pipes的包你可以使用。

首先安装ngx-pipes：npm install ngx-pipes --save并将其添加到您的模块中

import {NgPipesModule} from 'ngx-pipes';

@NgModule({
 // ...
 imports: [
   // ...
   NgPipesModule
 ]
})

然后你可以像这样使用它：

<div class="tools-category" *ngFor="let tool of tools | groupBy:'cat' | pairs ">
    <h3>{{tool[0]}}</h3>
    <div class="tools-by-cat">
        <div *ngFor="let val of tool[1]" class="tool-item">
            <h2>{{val.title}}</h2>
            <p>{{val.desc}}</p>
        </div>
    </div>
</div>

其中tools是您的对象列表。

这是一个有效的stackblitz groupBy example。我简化了您的数据，因为您没有将其作为代码进行复制和粘贴（将来您应该复制并粘贴日志结果而不是发布图像）。

Answer 2

我同意@coreuter，你的代码可以改进如下：

• 它没有在循环中创建对象，所以我会将new Object()移动到循环之外。
• 另一方面，当你描述你的问题时，你不需要new Object()方法，因为你只是映射值。

如果我理解正确，你期望以下内容：输入

[
{ CategoriaHerr: { Title: "Administrative Tools" }, Title: "Seg...."},
{ CategoriaHerr: { Title: "Administrative Tools" }, Title: "Senda...."},
{ CategoriaHerr: { Title: "Herr Cola" }, Title: "Herr"}
]

所需的输出

[
{ CategoriaHerr: { Title: "Administrative Tools" }, Title: "Seg...."},
{ CategoriaHerr: { Title: "Administrative Tools" }, Title: "Senda...."}
]
{ CategoriaHerr: { Title: "Herr Cola" }, Title: "Herr"}
]

您可以使用lodash（或类似的功能编程库）来处理此问题：示例 _.groupBy([{ CategoriaHerr: { Title: "Administrative Tools" }, Title: "Seg...."},{ CategoriaHerr: { Title: "Administrative Tools" }, Title: "Senda...."},{ CategoriaHerr: { Title: "Herr Cola" }, Title: "Herr"}], 'CategoriaHerr.Title')

你的代码

getTools() {
return this.adalSrv.get(
  environment.endpoints_sharepoint,
  environment.endpoints_sharepoint
  + environment.environment_sharepoint_extension + '/_api/Web/lists/getbytitle(\'Herramientas\')/items?$filter=(Tipo_x0020_de_x0020_Herramienta eq \'Web\')&$select=ID,Configuracion,Descripcion,Title,URLEnlace,CategoriaHerr/Title&$expand=CategoriaHerr/Title'
).map(tools => ( _.groupBy(tools.d.results, 'CategoriaHerr.Title' )

你的HTML```

{{cat}}

{{cat.key}}

{{item.title}}

**Get keys pipe** 从'@ angular / core'导入{Pipe，PipeTransform};

@Pipe({name: 'getValues'})
export class GetValuesPipe implements PipeTransform {
    transform(map: Map<any, any>): any[] {
        let ret = [];

        map.forEach((val, key) => {
            ret.push({
                key: key,
                val: val
            });
        });

        return ret;
    }
}

```

希望能帮助到你。