使用管道过滤HTTP JSON内容

时间:2017-01-23 20:19:41

标签: json angular typescript angular2-pipe

我正在尝试构建一个搜索字段来过滤我的表行,但我遇到了一些问题,因为我的"值"在管道中未定义。

这就是我所拥有的:

管:

@Pipe({
    name: 'filter',
    pure: false
})
export class SearchPipe implements PipeTransform {
    transform(value, searchinput) {
        if (!searchinput[0]) {
            return value;
        } else if (value) {
            return value.filter(item => {
                for (let key in item) {
                    if ((typeof item[key] === 'string' || item[key] instanceof String) &&
                        (item[key].indexof(searchinput[0]) !== -1)) {
                        return true;
                    }
                }
            });
        }
    }

组件:

  constructor(private _serverService: ServerService, private _router: Router) { }

    errorMessage: string;
    public servers: Server[];
    isLoading = true;

    selectedServer: Server;

    ngOnInit() {
          this.getServers('qa');
    }

    reloadServers(env) {
        this.servers = null;

        this.getServers(env);
    }

    getServers(env?) {
        this._serverService.getServers(env)
            .subscribe(
            value => {
                this.servers = value;
                this.isLoading = false;
            },
            error => this.errorMessage = <any>error);
    }

我的模板中正确填写了所有数据,问题出在我尝试搜索时。调试后,我注意到我管道中value参数的内容是未定义的。

以下是模板:

<input id="searchinput" class="form-control" type="text" placeholder="Search..."  [(ngModel)]="searchinput" />

<div id="searchlist" class="list-group">
    <table class="table table-bordered table-hover ">
         <thead>
            <tr>
                <th>Hostname</th>
            </tr>
         </thead>
         <tbody>
                <tr *ngFor="#server of servers | filter: searchinput">
                  <td>{{server.MachineNameAlias}}</td>
                </tr>
          </tbody>
     </table>
</div>

这是错误:

EXCEPTION: TypeError: item[key].indexof is not a function in [servers | filter: searchinput in MainServerPage@35:40]

1 个答案:

答案 0 :(得分:0)

该功能为indexOf,而非indexof。我还没看其余的,但这就是导致你的错误列在底部的原因。