angular 2 中带有过滤器的嵌套表格

Question

我需要嵌套 2 个表，第二个表在第一个表之上有一个过滤器。我创建了一个管道，但由于此错误而无法正常工作（看起来管道未找到）： Error

这是页面的代码：

HTML

<table class="panelTable">
<tr *ngFor="let type of arrTypes">
    <td>
        <div class="title-1">{{'ASSESSMENTTYPE.' + type.Type | translate}}</div>
        <table class="panelTaskTable">
            <tr *ngFor="let t of arrTask | filterType: type.Type">
                 <td><h4>{{t.teacherName}}</h4></td>
                 <td>
                    <img src="./images/nochecked.png" *ngIf="t.Progress != 100" />
                    <img src="./images/checked.png" *ngIf="t.Progress == 100" />
                </td>
            </tr>
        </table>
    </td>
</tr>

类型说明

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

@Pipe({ name: 'filterType' })
export class FilterType implements PipeTransform {
    transform(items: Array<TaskDTO>, Type: string): Array<TaskDTO> {

    if (!items)
        return null;
    else
        return items.filter(item => item.Type === Type);
    }
}

预期结果与此类似：

ExpectedResult

知道如何解决这个问题吗？

谢谢！

Answer 1

您必须在 app.module.ts 中声明您的自定义管道。

...
import { FilterType } from './filterType';

@NgModule({
  imports: [
    BrowserModule,
...
  ],
  declarations: [
    AppComponent,
   ...
    FilterType
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

我还建议将您的管道重命名为 FilterTypePipe。

angular 2 中带有过滤器的嵌套表格

Nested tables with filter in angular 2

typescript

ngfor

angular2-pipe