Angular2：錯誤錯誤：InvalidPipeArgument：''爲管'AsyncPipe'和Angular2：錯誤TypeError：無法讀取屬性'處置'null

Question

我是新的angular2，我的目標是顯示從休息返回的Json數據服務，在我的模板中，下面是來自休息服務的Json數據。 {「wellList」：[{「country」：「IDN」，「well」：「Test」，「wellbore」：「N」，「company」：「Test」，「active」：「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： '在invalidPipeArgumentError' 管道 'AsyncPipe' （common.es5.js：2610） 在AsyncPipe.webpackJsonp .../../.. /普通/ @角/常見。 es5.js.AsyncPipe._selectStrategy（common.es5.js：2755） at AsyncPipe.webpackJsonp .../../../common/@angular/common.es5.js.AsyncPipe._subscribe（common.es5。 JS：2741） 在AsyncPipe.webpackJsonp .../../../common/@angular/common.es5.js.AsyncPipe

錯誤類型錯誤：無法讀取性能在AsyncPipe空 的 '處置'。 webpackJsonp .../../../common/@angular/common.es5.js.AsyncPipe._dispose（common.es5.js：2761） at AsyncPipe.webpack JSONP .../../../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管進入次e app.module.ts ???。因爲這個錯誤是注意到他們沒有他們。並且這個錯誤TypeError：無法讀取屬性'處置'null在，是他們不能運行'AsyncPipe'後的日誌。希望這可以幫助你修復

Answer 2

asycnPipe只處理null，EventEmitter，promise和Observable，wells是一個對象（JSON對象）。 enter link description here