Question

我从API获取数据并将其返回到可正常工作的视图中。但我发现很难按日期对数据进行分组。当我尝试收到此错误时：The pipe 'groupBy' could not be found

pipe.ts

import { Pipe, PipeTransform } from "@angular/core";
@Pipe({name: 'groupBy'})
export class GroupByPipe implements PipeTransform{
  transform(value: Array<any>, field:string): Array<any> {
    if (value) {
      const groupedObj = value.reduce((prev, cur) =>{
        if(!prev[cur[field]]) {
          prev[cur[field]] = [cur]
        } else{
          prev[cur[field]].push(cur);
        }

        return prev;
      }, {});

      return Object.keys(groupedObj).map(key => ({ key, value: groupedObj[key] }));
    } else {
      return null;
    }
  }

}

view.html

<ion-item *ngFor="let item of list | groupBy:'date_ph'" no-lines >
<ion-item>
<ion-icon name="calendar" item-start color="light"></ion-icon>
   <h2>Date</h2>
<ion-note color="dark" item-end>{{item.date_ph}} </ion-note>
</ion-item>
    </ion-item>

view.ts

import { GroupByPipe } from '../../pipes/groupby/groupby';
import {Component, Pipe} from '@angular/core';
@Component({
  selector: 'page-view',
  templateUrl: 'view.html'

})

Answer 1

在导入view.ts

的GroupByPipe文件中

import { GroupByPipe } from '../../pipes/groupby/groupby';

它不适用于您的view.html文件

您必须在app.module.ts文件中声明：

@NgModule({
  declarations: [
    GroupByPipe
  ],
})

或者，您可以将Swanand导入GroupByPipe到您的组件中提示：

@Component({ 
  selector: 'page-view', 
  templateUrl: 'view.html'
  providers : [GroupByPipe]
 }) export class NameComponent implements OnInit {
  constructor(private groupByPipe: GroupByPipe) {}

  ngOnInit() {
    // invoke groupByPipe here based on your logic
  }

}

Answer 2

您需要在组件中导入服务。

import { GroupByPipe } from '../../pipes/groupby/groupby';
import {Component, Pipe} from '@angular/core'; 
@Component({ 
selector: 'page-view', 
templateUrl: 'view.html'
providers : [GroupByPipe]
 })

如果它不起作用，请尝试将其添加到module.ts文件中。

angular2 - 分组记录时找不到管道

2 个答案: