Angular 如何在数组中使用groupby显示有组织的类别?

Angular 如何在数组中使用groupby显示有组织的类别?,angular,typescript,angular7,Angular,Typescript,Angular7,我想展示按类别组织的瓷砖。 在类别中,我想在顶部显示类别标题和类别简介 并显示以下标题和说明 App.component.html: 这是我的html <div class="tools-category" *ngFor="let tool of tools | groupBy:'categories.Category_title' | pairs "> <h3>{{tool[0]}}</h3> <div class="tools-by-cat

我想展示按类别组织的瓷砖。 在类别中,我想在顶部显示类别标题和类别简介 并显示以下标题和说明

App.component.html:


这是我的html

<div class="tools-category" *ngFor="let tool of tools | groupBy:'categories.Category_title' | 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>
}

这是一种观点:


请格式化您的代码此处的每个工具似乎有多个类别,您希望按什么顺序排序?如果您能提供一些示例,这将有助于回答您的问题。您好,我想使用我的app.component.html中的*ngFor=“let tool of tools | groupBy:'categories.Category_title'| pairs”对类别进行排序,在类别内部我想显示类别标题和类别简介,我得到了[object object object],[object object]值。代码格式和屏幕截图已更新请格式化您的代码这里的每个工具似乎有多个类别,您希望按什么顺序排序?如果您能提供一些示例,这将有助于回答您的问题。您好,我想使用我的app.component.html中的*ngFor=“let tool of tools | groupBy:'categories.Category_title'| pairs”对类别进行排序,在类别内部我想显示类别标题和类别简介,我得到了[object object object],[object object]更新代码格式和屏幕截图
import { Component } from '@angular/core';
@Component({
     selector: 'my-app',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
 })
export class AppComponent {
  tools = [
  {
     id: 0,
     title: 'Title 0',
     desc: 'Description',
     categories: [
       {
          "Category_title": "My Category Title 1",
          "Category_intro": "My Category intro 1",
       }, 
       {
          "Category_title": "My Category Title 2",
          "Category_intro": "My Category intro 2",
       }
         ],
  },
  {
     id: 1,
     title: 'Title 1',
     desc:'Description',
     categories: [
       {
          "Category_title": "My Category Title",
          "Category_intro": "My Category intro 
       },
       {
          "Category_title": "My Category Title 2",
          "Category_intro": "My Category intro 2", 
       }
         ],
   },
   {
      id: 2,title: 'Title 2',
      desc: 'Description',
      cat: 'Category 2',
      categories: [
        {
           "Category_title": "My Category Title",
           "Category_intro": "My Category intro 1",
        },
        {
           "Category_title": "My Category Title 2",
           "Category_intro": "My Category intro 2",
        }
          ],
    },
    {
       id: 3,title: 'Title 3',
       desc: 'Description',
       categories: [
         {
            "Category_title": "My Category Title",
            "Category_intro": "My Category intro 1",
         },
         {
             "Category_title": "My Category Title 2",
             "Category_intro": "My Category intro 2",
         }
           ],
      },
      {
         id: 4,
         title: 'Title 4',
         desc: 'Description',
         categories: [
           {
              "Category_title": "My Category Title",
              "Category_intro": "My Category intro 1",
           },
           {
              "Category_title": "My Category Title 2",
              "Category_intro": "My Category intro 2",
           }
   ],
 }]