首页 文章

过滤@Pipe错误中的数据

提问于
浏览 次
1

我正在尝试过滤数据并在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 . 我知道还有其他方法，但这个我更喜欢 . 但我得到例外 .

未处理的Promise拒绝：模板解析错误：无法找到管道'过滤器'（“] * ngFor =”let data2 of（model.Register10Data | filter：'sectionGroup'：data1.id）; let dataIndex = index“> “）：e @ 68:20;区域：;任务：Promise.then;值：错误：模板解析错误：找不到管道'过滤器'（“] * ngFor =”let data2 of（model.Register10Data | filter：'sectionGroup'：data1.id）; let dataIndex = index“>” ）：e @ 68:20

angular typescript filtering grouping

2 回答

  • 0

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

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

    试试这个

    <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 { }
    回复于

相关问题