Angular2: ERROR Erreur: InvalidPipeArgument: '' pour pipe 'AsyncPipe' et Angular2: ERROR TypeError: Impossible de lire la propriété 'dispose' de null

Question

Je suis nouveau à angular2, ma cible est d'afficher les données Json qui est retourné du repos service, dans mon modèle, ci-dessous est les données JSON qui proviennent du service de repos.

{"wellList": [{"pays": "IDN", "bien": "Test", "puits": "N", "compagnie": "Test", "actif": "N" }, {"pays": "IDN", "bien": "Test", "puits": "N", "compagnie": "Test", "actif": "Y"}, {"pays": " IDN "," well ":" Test "," wellbore ":" N "," compagnie ":" Test "," actif ":" Y "}, {" pays ":" IDN "," bien ":" Test "," wellbore ":" N "," company ":" Test "," actif ":" Y "}, {" pays ":" IDN "," bien ":" Test "," puits ":" N », "société": "test", "active": "Y"}]}

le dessous est le code que je l'ai écrit dans mon modèle:

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

Mais, pas de chance, il ne fonctionne pas, donnant les deux erreurs ci-dessous:

erreur Erreur: InvalidPipeArgument: '' pour pipe 'AsyncPipe' à invalidPipeArgumentError (common.es5.js: 2610) à AsyncPipe.webpackJsonp .../../../common/@ angulaire/commun. as5.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

erreur TypeError: Impossible de lire la propriété 'dispose' de null à AsyncPipe. webpackJsonp .../../../common/@angular/common.es5.js.AsyncPipe._dispose (common.es5.js: 2761) à AsyncPipe.webpack Jsonp .../../../common/@angular/common.es5.js.AsyncPipe.transform (common.es5.js: 2725)

Quelqu'un peut-il me aider comment se débarrasser de cette

Composant:

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

} 

Answer 1

erreur erreur: InvalidPipeArgument: '' pour pipe 'AsyncPipe', je pense que vous devez vérifier que vous êtes déjà Asynce comprennent tuyau dans e e app.module.ts ??? parce que cette erreur est notez qu'ils ne les ont pas. Et cette ERREUR TypeError: Impossible de lire la propriété 'disposer' de null à, est log après qu'ils ne peuvent pas exécuter le 'AsyncPipe'. Espérons que cela peut vous aider à corriger

Answer 2

asycnPipe est seulement traiter avec null, EventEmitter, promettre et Observable, le wells est un objet (objet JSON). enter link description here