使用管道过滤 HTTP JSON 内容

Question

我正在尝试构建一个搜索字段来过滤我的 table 行，但我遇到了一些问题，因为我的 "value" in 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);
    }

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

这是模板：

<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]

Answer 1

函数是indexOf，不是indexof。我还没有看其余部分，但这就是导致您在底部列出的错误的原因。

使用管道过滤 HTTP JSON 内容

Filter HTTP JSON content with pipe

json

typescript

angular2-pipe

angular