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

2023年6月8日 281次阅读

我是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：”for pipe’AsyncPipe’
    at invalidPipeArgumentError(common.es5.js：2610)
    在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

错误TypeError：无法读取null的属性’dispose’
    在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;
  }

}

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

点赞