使用ngfor和web api数据使用管道进行表过滤

Question

我正在尝试为我的表创建一个过滤器，这样当我通过参数搜索时，它只显示包含参数的行。这是我正在努力实现的一个有效例子 - plunkr。

我使用了plunkr和this website中的代码作为参考，并尝试在我的解决方案中实现它。我从web api获取表数据。

我正在尝试按“codeListVesselID”过滤。 这是代码：

vesel.pipe.ts

import { Pipe, PipeTransform, Injectable } from '@angular/core';
import { CodeListVessel } from './vessels.component';

@Pipe({
    name: 'vesselfilter',
    pure: false
})
@Injectable()
export class VesselIDFilter implements PipeTransform {
  transform(vessel: CodeListVessel[], args: any[]): any {
    return vessel.filter(CodeListVessel => CodeListVessel.codeListVesselID.toLowerCase().indexOf(args[0].toLowerCase()) !== -1);
  }
}

管道在声明下的app.module.ts中定义。

vessels.component.ts

import { Component, Input } from '@angular/core';
...
import { VesselIDFilter } from '../vessels/vessels.pipe';

@Component({
    selector: 'vessels',
    template: require('./vessels.component.html'),
    styleUrls: ['./vessel.component.css']
})

export class vesselsComponent {
    // to get the Vessel Details  
    public vessel: CodeListVessel[] = [];
    ...

    constructor(public http: Http, private dialogService: DialogService, private confirmationService: ConfirmationService, private auth: Auth) {
        this.getData();
    }
    //to get all the Vessel data from Web API  
    getData() {
        this.http.get('/api/CodeListVesselAPI/Vessel').subscribe(result => {
        this.vessel = result.json();
        });
    }
    ...
}

export interface CodeListVessel {
    codeListVesselID: string;
    mmsi: string;
    imo: number;
    ...
}

vessels.component.html

<input type="text" id="inputID" class="form-control" placeholder="Code" [(ngModel)]="codeListVesselID">
<div class="container">
    <div class="table-wrapper">
        <table >
                <tr>
                    <th width="100">Code</th>
                    <th width="160">MMSI</th>
                    <th width="160">IMO</th>
                    ...
                </tr>
            <tbody *ngFor="let CodeListVessel of vessel | vesselfilter:codeListVesselID;">
                <tr>
                    <td>
                        <span style="color:black">{{CodeListVessel.codeListVesselID}}</span>
                    </td>
                    <td>
                        <span style="color:black">{{CodeListVessel.mmsi}}</span>
                    </td>
                    <td>
                        <span style="color:black">{{CodeListVessel.imo}}</span>
                    </td>
                    ...
                </tr>
            </tbody>
        </table>
    </div>
</div>

以下是运行上述代码时出现的错误： 它指向管道中的代码，但我不知道问题是什么。 如果我删除过滤器代码，数据会在表中正确显示，以便数据完好无损。

另一部分可能还有问题。

任何帮助将不胜感激。

Answer 1

export class VesselIDFilter implements PipeTransform {
  transform(vessel: CodeListVessel[], args: any[]): any {
    return vessel.filter(CodeListVessel => CodeListVessel.codeListVesselID.toLowerCase().indexOf(args[0].toLowerCase()) !== -1);
  }
}

在你的管道args中不会是一个数组。实际上，您正在接收要过滤的船只的id作为第二个参数。你可以做两件事。

解决方案1 ​​

您可以将参数类型更改为实际值，即字符串：

export class VesselIDFilter implements PipeTransform {
  transform(vessel: CodeListVessel[], vesselId: string): any {
    if (!vesselId || vesselId === '') {
      return vessel;
    }

    return vessel.filter(CodeListVessel => CodeListVessel.codeListVesselID.toLowerCase().indexOf(vesselId.toLowerCase()) !== -1);
  }
}

解决方案2

或者您可以将类型更改为正确的休息参数：

export class VesselIDFilter implements PipeTransform {
  transform(vessel: CodeListVessel[], ...args: any[]): any {
    return vessel.filter(CodeListVessel => CodeListVessel.codeListVesselID.toLowerCase().indexOf(args[0].toLowerCase()) !== -1);
  }
}

如果没有选择过滤器，请确保您实际上正在实现所需的行为。如果未选择过滤器，您是否要显示所有项目或隐藏所有项目。这取决于你。

请参阅plunker了解工作示例：https://plnkr.co/edit/z8OwlH0JwfXe2qCLRP5B?p=preview

Answer 2

我认为codeListVesselID可能在页面初始化期间未定义，因此args为空且无法访问[0]。

尝试将转换功能更改为此功能：

transform(vessel: CodeListVessel[], args: any[]): any {
    if (args && args.length) {
        return vessel.filter(CodeListVessel => CodeListVessel.codeListVesselID.toLowerCase().indexOf(args[0].toLowerCase()) !== -1);
    }
    else {
        return vessel;
    }

}