Angular2：错误错误：InvalidPipeArgument：''for pipe'AsyncPipe'和Angular2：ERROR TypeError：无法读取属性'dispose'为null

Question

我是angular2的新手，我的目标是显示从休息服务返回的Json数据，在我的模板中，下面是来自休息服务的Json数据。

{ “wellList”：[{ “国家”： “IDN”， “良好”： “测试”， “井眼”： “N”， “公司”： “测试”， “活性”： “N”}，{”国家 “：” IDN “ ”好“： ”测试“， ”井“： ”N“， ”公司“： ”测试“， ”主动“： ”Y“}，{ ”国“： ”IDN“，”好 “：” 测试 “ ”井“： ”N“， ”公司“： ”测试“， ”主动“： ”Y“}，{ ”国“： ”IDN“， ”好“： ”测试“，”井眼 “：” N “ ”公司“： ”测试“， ”主动“： ”Y“}，{ ”国“： ”IDN“， ”好“： ”测试“， ”井“： ”N“，”公司 “：” 测试”， “主动”： “Y”}]}

以下是我在模板中编写的代码：

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

但是，没有运气它不起作用，给出以下两个错误：

ERROR错误：InvalidPipeArgument：''对于管道'AsyncPipe'在invalidPipeArgument错误（common.es5.js：2610）处AsyncPipe.webpackJsonp ... / .. / .. / common/@angular/common.es5.js.AsyncPipe。 _selectStrategy（common.es5.js：2755）位于AsyncPipe的AsyncPipe.webpackJsonp ... / .. / .. / common/@angular/common.es5.js.AsyncPipe._subscribe（common.es5.js：2741）。 webpackJsonp ... / .. / .. / common/@angular/common.es5.js.AsyncPipe

错误TypeError：无法在AsyncPipe的AsyncPipe.webpackJsonp ... / .. / .. / common/@angular/common.es5.js.AsyncPipe._dispose(common.es5.js：2761）中读取null的属性'dispose' .webpackJsonp ... / .. / .. / common/@angular/common.es5.js.AsyncPipe.transform（common.es5.js：2725）

任何人都可以帮我解决这个问题

零件：

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); 
  }

}

服务：

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;
  }

}

Answer 1

ERROR错误：InvalidPipeArgument：''对于管道'AsyncPipe'，我认为你必须检查你是否已经将Asynce Pipe包含到app.module.ts ???中。因为这个错误是通知他们没有它们。而这个ERROR TypeError：无法读取null的属性'dispose'，是无法运行'AsyncPipe'后的日志。希望这可以帮助你修复

Answer 2

asycnPipe只处理null，EventEmitter，promise和Observable，wells是一个对象（JSON对象）。 enter link description here