Angular2:ERROR Error: InvalidPipeArgument: '' for pipe 'AsyncPipe' and Angular2:ERROR TypeError: Cannot read property 'dispose' of null

I am new to angular2, my target is to display the Json data which is returned from rest service, in my template, below is the Json data which is coming from rest service.

{"wellList":[{"country":"IDN","well":"Test","wellbore":"N","company":"Test","active":"N"},{"country":"IDN","well":"Test","wellbore":"N","company":"Test","active":"Y"},{"country":"IDN","well":"Test","wellbore":"N","company":"Test","active":"Y"},{"country":"IDN","well":"Test","wellbore":"N","company":"Test","active":"Y"},{"country":"IDN","well":"Test","wellbore":"N","company":"Test","active":"Y"}]}

The below is the code which i have written in my template:

 <ul>
 <li *ngFor="let well of wells | async">
    <table>
      <tr>
        <th scope="col">Active</th>
        <th scope="col">Company</th>
        <th scope="col">Country</th>
        <th scope="col">Well</th>
        <th scope="col">Wellbore Indicator</th>
      </tr>
      <tr>
        <td>{{well.active}}</td>  
        <td>{{well.company}}</td>    
        <td>{{well.country}}</td>
        <td>{{well.well}}</td>
        <td>{{well.wellbore}}</td>  
      </tr>
      </table>
    </li>
  </ul>

But, no luck it is not working, giving the below two errors:

ERROR Error: InvalidPipeArgument: '' for pipe 'AsyncPipe' at invalidPipeArgumentError (common.es5.js:2610) at AsyncPipe.webpackJsonp.../../../common/@angular/common.es5.js.AsyncPipe._selectStrategy (common.es5.js:2755) at AsyncPipe.webpackJsonp.../../../common/@angular/common.es5.js.AsyncPipe._subscribe (common.es5.js:2741) at AsyncPipe.webpackJsonp.../../../common/@angular/common.es5.js.AsyncPipe

ERROR TypeError: Cannot read property 'dispose' of null at AsyncPipe.webpackJsonp.../../../common/@angular/common.es5.js.AsyncPipe._dispose (common.es5.js:2761) at AsyncPipe.webpackJsonp.../../../common/@angular/common.es5.js.AsyncPipe.transform (common.es5.js:2725)

Can anyone help me how to get rid of this

Component:

import { Component, OnInit } from '@angular/core';
import { UserService } from '../services/user.service';
import { User } from '../user/user';
import {  Observable  } from 'rxjs/Rx';  
@Component({
  selector: 'app-well',
  templateUrl: './well.component.html',
  styleUrls: ['./well.component.css'],
  providers:[UserService]
})
export class WellComponent implements OnInit {
  title = 'Wells';
  wells: User[];  
  errorMessage: string;
  constructor(private userService:UserService) {
    this.wells = [];  

   }

  ngOnInit() {
    let self = this;  
    self.userService.getWells().subscribe(response => this.wells = response, error => this.errorMessage = < any > error); 
  }

}

Service:

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, Response  } from '@angular/http';
import { Observable,Subject } from 'rxjs/Rx';
import 'rxjs/add/operator/toPromise';  
import { User } from '../user/user';
import 'rxjs/Rx';
@Injectable()
export class UserService {
  //private jsonFileURL: string='/assets/wells.json';

  constructor(private  http:Http) { }
  getWells(): Observable < User[] > {  
    return this.http.get('http://localhost:8080/RESTfulExample/rest/auth/testuser1/pass',{headers:this.getHeaders()}).map((response: Response) => {  
        return <User[] > response.json();  
    }).catch(this.handleError);  
}  
//    
private handleError(errorResponse: Response) {  
    console.log(errorResponse.statusText);  
    return Observable.throw(errorResponse.json().error || "Server error");  
}  
private getHeaders(){
    // I included these headers because otherwise FireFox
    // will request text/html instead of application/json
    let headers = new Headers();
    headers.append('Accept', 'application/json');
    return headers;
  }

}