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

您的代码有几个问题：

您的CSS类不在引号内
您没有正确访问循环的值

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

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

编辑

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

**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;
    }
}

```

希望有帮助。

在Angular 5中按对象值分组

2 个答案:

编辑

{{cat}}

{{cat.key}}