Angular2 JSON Cliente ?

Front-end
#1

Eu tenho um sistema em java, que estou migrando para Angular2, mas estou parado em uma coisa bem esquisita, eu consigo CADASTRAR/EDITAR/ LISTAR, mas não consigo fazer pesquisa no Web Service.

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

//import {LeitoresService} from '../shared/leitores.service';
import {Leitor} from '../shared/leitor';

@Injectable()
export class LeitorSearchService {
  constructor(private http: Http) { }

  search(term: string): Observable<Leitor[]> {
    return this.http
      .get(`http://172.29.0.30:8087/pontows/webresources/relogio/${term}`)
      .map((r: Response) => r.json().data as Leitor[])
      .catch((error: any) => {
          console.error('======================= NÃO ENCONTRADO=============='+ term);
          return Observable.throw(error.message || error);
      });
  }
}

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { Router } from '@angular/router';
import { Subject } from 'rxjs/Subject';

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/switchMap';

import {LeitorSearchService} from '../search/leitor-search.service';
import {Leitor} from '../shared/leitor';

@Component({
  selector: 'leitor-search',//<leitor-search></leitor-search>
  templateUrl: './leitor-search.component.html',
  styleUrls: ['./leitor-search.component.css'],
  providers: [LeitorSearchService]
})
export class LeitorSearchComponent implements OnInit {

  leitores: Observable<Leitor[]>;
  private searchTerms = new Subject<string>();
  term = new FormControl();
  
  constructor(private leitorSearchService: LeitorSearchService, private router: Router) { }

  search(term: string): void {
    this.searchTerms.next(term);
  }

   ngOnInit(): void {
    this.leitores = this.searchTerms
      .debounceTime(300)        // wait for 300ms pause in events
      .distinctUntilChanged()   // ignore if next search term is same as previous
      .switchMap(term => term   // switch to new observable each time
        // return the http search observable
        ? this.leitorSearchService.search(term)
        // or the observable of empty leitores if no search term
        : Observable.of<Leitor[]>([]))
      .catch(error => {
        // TODO: real error handling
        console.log(`Error in component ... ${error}`);
        return Observable.of<Leitor[]>([]);
      });
  }

  gotoDetail(leitor: Leitor): void {
    let link = ['/detail', leitor.id];
    this.router.navigate(link);
  }
}

<div id="search-component">
    <h4>Leitor Search</h4>
    <input #searchBox id="search-box" (keyup)="search(searchBox.value)" />
    <!--<input #term type="text" id="search" (keyup)="search(term.value)">-->
    <table>
        <thead>
            <th>macaddress</th>
        </thead>
        <tbody>

            <tr *ngFor='let leitor of leitores | async'>

                <td>{{leitor.macaddress}}</td>
                <td>{{1}}</td>

            </tr>
        </tbody>
    </table>
</div>

.search-result {
    border-bottom: 1px solid gray;
    border-left: 1px solid gray;
    border-right: 1px solid gray;
    width: 195px;
    height: 20px;
    padding: 5px;
    background-color: black;
    cursor: pointer;
}

#search-box {
    width: 200px;
    height: 20px;
    border: 1px solid lightgray;
}