Question

如何编写一些@Pipe来过滤（在<input>标记中）表中的数据？

    <tr *ngFor='let list of lists'>
      <td><input type="" name="" value=""></td>
      <td>{{ list.name }}</td>
      <td>{{ list.location }}</td>
      <td>{{ list.type_id }}</td>
    <tr>

我通过http服务从api获得的数据：

getServices(): Observable<any> {
        return this._http.get(this._url)
            .map(res => res.json());
    }

UPD：

这是我的服务组件：

import {Injectable} from '@angular/core';
import {Http, Headers, RequestOptions} from '@angular/http';
import {Observable} from 'rxjs/Observable';

import 'rxjs/add/operator/map'

@Injectable() 
export class TableComponentService{
    private _url = 'http://101.496.222.511:8080/api/v1/10';

    constructor(private _http: Http) {

    }

    names:string[];
    getServices(): Observable<any> {
        return this._http.get(this._url)
            .map(res => res.json());
    }

}

这是一个表组件

import { Component, OnInit } from '@angular/core';
import { TableComponentService } from './table.service';

@Component({
    selector: 'tablecomponent',
    templateUrl: 'app/table.template.html',
    providers: [TableComponentService]
})
export class TableComponent implements OnInit {
    lists: any[];

    constructor(private _service: TableComponentService) {

    }

    ngOnInit() {
        this._service.getServices()
            .subscribe(lists => this.lists = lists)
    }

}

Answer 1

而不是管道使用keyup事件来调用getservices（）并将接收到的值存储在变量中，并使用变量

在任何地方显示结果

示例

<tr *ngFor='let list of lists'> <td><input type="" name="" value="" (keyup)="getServices()" > <span *ngFor='let name of names'>{{name }}</span> </td> <td>{{ list.name }}</td> <td>{{ list.location }}</td> <td>{{ list.type_id }}</td> <tr> names:string[]; getServices(): Observable<any> { this.names=this._http.get(this._url) .map(res => res.json()); }

编辑： -

在构造函数中使_service public

constructor(public_service: TableComponentService)

然后在html中

<input type="" name="" value="" (keyup)="_service.getServices()" >

以角度2过滤输入

1 个答案: