Angular2:ERROR 错误: InvalidPipeArgument: '' for pipe 'AsyncPipe' 和 Angular2:ERROR TypeError: Cannot read property 'dispose' of null

Question

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

{"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"}]}

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

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

但是，不幸的是，它不起作用，出现以下两个错误：

错误错误: InvalidPipeArgument: '' for pipe 'AsyncPipe' 在 invalidPipeArgumentError (common.es5.js:2610) 在 AsyncPipe.webpackJsonp.../../../common/@angular/common.es5.js.AsyncPipe._selectStrategy (common.es5.js:2755) 在 AsyncPipe.webpackJsonp.../../../common/@angular/common.es5.js.AsyncPipe._subscribe (common.es5.js:2741) 在 AsyncPipe.webpackJsonp.../../../common/@angular/common.es5.js.AsyncPipe

错误类型错误：无法读取 null 的属性“处置” 在 AsyncPipe.webpackJsonp.../../../common/@angular/common.es5.js.AsyncPipe._dispose (common.es5.js:2761) 在 AsyncPipe.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

错误错误：InvalidPipeArgument: '' for pipe 'AsyncPipe'，我认为您必须检查您是否已经将 Asynce Pipe 包含到 app.module.ts 中？？？。因为这个错误是通知他们没有它们。并且这个错误类型错误：无法读取属性'dispose' of null at，是在他们无法运行'AsyncPipe'之后的日志。希望这可以帮助您修复

Answer 2

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