Question

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

{＆＃34; wellList＆＃34;：[{＆＃34;国家＆＃34;：＆＃34; IDN＆＃34;＆＃34;以及＆＃34;：＆＃34;试验＆＃34; ＆＃34;井筒＆＃34;：＆＃34; N＆＃34;＆＃34;公司＆＃34;：＆＃34;试验＆＃34;＆＃34;有源＆＃34;：＆＃34; N'＃34;}，{＆＃34;国家＆＃34;：＆＃34; IDN＆＃34;＆＃34;以及＆＃34;：＆＃34;试验＆＃34;＆＃34;井筒＆＃34 ;：＆＃34; N＆＃34;＆＃34;公司＆＃34;：＆＃34;试验＆＃34;＆＃34;有源＆＃34;：＆＃34; Y＆＃34;}，{＆＃34;国家＆＃34;：＆＃34; IDN＆＃34;＆＃34;以及＆＃34;：＆＃34;试验＆＃34;＆＃34;井筒＆＃34;：＆＃34; N＆＃ 34;，＆＃34;公司＆＃34;：＆＃34;试验＆＃34;＆＃34;有源＆＃34;：＆＃34; Y＆＃34;}，{＆＃34;国家＆＃34 ;: ＆＃34; IDN＆＃34;＆＃34;以及＆＃34;：＆＃34;试验＆＃34;＆＃34;井筒＆＃34;：＆＃34; N＆＃34;＆＃34;公司＆＃34;：＆＃34;试验＆＃34;＆＃34;有源＆＃34;：＆＃34; Y＆＃34;}，{＆＃34;国家＆＃34;：＆＃34; IDN＆＃34; ＆＃34;以及＆＃34;：＆＃34;试验＆＃34;＆＃34;井筒＆＃34;：＆＃34; N＆＃34;＆＃34;公司＆＃34;：＆＃34;测试＆＃34;＆＃34;有源＆＃34;：＆＃34; Y＆＃34;}]}

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

 <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：＆＃39;＆＃39; for pipe＆＃39; AsyncPipe＆＃39; 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

ERROR TypeError：无法读取属性＆'39; dispose＆＃39;为null 在AsyncPipe.webpackJsonp ... / .. / .. / common/@angular/common.es5.js.AsyncPipe._dispose（common.es5.js：2761） at 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：''对于管道'AsyncPipe'，我认为您必须检查是否已将Asynce Pipe包含到app.module.ts ???中。因为这个错误是通知他们没有它们。而这个ERROR TypeError：无法读取null的属性'dispose'，是无法运行'AsyncPipe'后的日志。希望这可以帮助你解决问题

Answer 2

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

Angular2：ERROR错误：InvalidPipeArgument：＆＃39;＆＃39; for pipe＆＃39; AsyncPipe＆＃39;和Angular2：错误类型错误：无法读取属性＆'39; dispose＆＃39; null

2 个答案: