在@Pipe中过滤数据错误

Question

我试图过滤数据并将其呈现在htmltable中。 下面我的代码： 在module.ts

import Register10Pipe = require("./register10/register10.pipe"); 
@NgModule({ 
    declarations: [ 
     Register10Pipe.FilterPipe 
    ]) 

在my.pipe.ts

import { Component, OnInit, Pipe, PipeTransform, Injectable } from '@angular/core'; 

@Pipe({ 
    name: 'sectionGroup' 
}) 

export class FilterPipe implements PipeTransform { 
    transform(items: any[], field: number, value: number): any[] { 
     if (!items) return []; 
     return items.filter(it => (+it[field]) === (+value)); 
    } 
} 

在my.component.ts

import { FilterPipe } from './register10.pipe'; 
export class MyComponent implements OnInit { 
    filter: FilterPipe; 
...... 

HTML，其中的数据必须呈现

<ng-container *ngFor='let data1 of sectionList'> 
     <tr> 
      <td colspan="7"> 
       {{data1.name}} 
       <button (click)="ArrRow($event)" style="float: right" id="{{data1.id}}">+</button> 
      </td> 
     </tr> 
     <tr *ngFor="let data2 of (model.Register10Data | filter:'sectionGroup':data1.id); let dataIndex = index"> 
      <td> 
       {{dataIndex}} 
      </td> 
     </tr> 
    </ng-container> 

sectionList它是像myObj这样的对象数组{number：id，string：name} 我从此数组中获取id并尝试过滤从服务器接收的数据。正如我所理解的在角度可以使用@Pipe。我知道还有其他的方法，但是我更喜欢这个。但我得到例外。

Unhandled Promise rejection: Template parse errors: The pipe 'filter' could not be found (" ]*ngFor="let data2 of (model.Register10Data | filter:'sectionGroup':data1.id); let dataIndex = index">"): e@68:20 ; Zone: ; Task: Promise.then ; Value: Error: Template parse errors: The pipe 'filter' could not be found (" ]*ngFor="let data2 of (model.Register10Data | filter:'sectionGroup':data1.id); let dataIndex = index">"): e@68:20

Answer 1

尝试在属性+过滤器周围添加括号？

<tr *ngFor="let data of (model.Register10Data | filter:'sectionGroup':'cSectionId'); let dataIndex = index"> 
</tr> 

Answer 2

试试这个

<ng-container *ngFor='let data1 of sectionList'> 
    <tr> 
     <td colspan="7" >{{data1.name}} 
      <button (click)="ArrRow($event)" style="float: right" id="{{data1.id}}" >+</button> 
     </td> 
    </tr> 
    <tr *ngFor="let data2 of (model.Register10Data | filter:'sectionGroup':data1.id); let dataIndex = index"> 
     <td> 
      {{dataIndex}} 
     </td> 
    </tr> 
</ng-container> 

您可以在第二个从第一ngFor访问值，但只有当你声明在不同的名字data1和data2这里。

如果您还没有这样做的话，包括在app.module.ts

... 
import { FilterPipe } from './filter.pipe'; 

@NgModule({ 
    imports: [ 
    ..., 
    ], 
    declarations: [ 
    ..., 
    FilterPipe 
    ], 
}) 
export class MyModule { }