Angular 5，来自 API 的 JSON 数组

Question

我正在尝试从 API 加载数组并使用 Angular 5 将其显示在表格中。

我的代码听起来很简单：

import { HttpClient } from '@angular/common/http';

export class CryptreviewComponent implements OnInit {

  public results:Review[] = [];

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.http.get('http:...url..').subscribe(data => {
        console.log(typeof data);
        console.log(typeof this.results);
        this.results = data as Review[];
        console.log(typeof this.results);
        console.log(this.results);
    },
    err => {
        console.log(err);
    }   );
  }
}

interface Review{
    coin_id:string;
    user_id:number;
    name:string;
    reach_remark:string;
    reach_score:number;
    security_remark:string;
    security_score:number;
    dev_remark:string;
    dev_score:number;
    transparency_remark:string;
    transparency_score:number;
    fungibility_remark:string;
    fungibility_score:number;
    coin_distribution_remark:string;
    coin_distribution_score:number;
    privacy_remark:string;
    pricavy_score:number;
    hardened_remark:string;
    hardened_score:number;
    features_remark:string;
    features_score:number;
    remarks:string;
    links:string;
    published:number;
    verification_status:number;
}

观点：

<table>
    <tr *ngFor="let review of results"> 
        <td>
        {{review.coin_id}}
        </td>
    </tr>
</table>

这是我得到的结果：

字符串->console.log(数据类型);

对象->console.log(typeofthis.results);

字符串->console.log(typeof this.results);

[{"coin_id":"BTC","user_id":13,"name":"","re​​ach_remark":"","re​​ach_score":100,"security_remark":"","security_score": 93,"dev_remark":"","dev_score":70,"transparency_remark":"","transparency_score":81,"fungibility_remark":"","fungibility_score":30,"coin_distribution_remark":"","coin_distribution_score ":66,"privacy_remark":"","privacy_score":71,"hardened_remark":"","hardened_score":100,"features_remark":"","features_score":34,"remarks":"", "links":"","published":0,"verification_status":0}]

-> console.log(this.results);

ERROR 错误：尝试比较 '[{"coin_id":"BT...' 时出错。只有数组 并且允许迭代

我得到的结果似乎是有效的 JSON，但它只是不想成为一个数组。

到目前为止我已经尝试过：JSON.parse(data), data.json()

Answer 1

由于您使用的是 HttpClient，因此 response.json() 已经隐含。

你不应该像这样投射响应，你的服务应该返回一个可观察的评论数组，然后你会得到数据。

服务：

 getReview():Observable<Review[]>{
     return this._http.get(this.getReviewURL)
     .catch( this.handleError );//not needed but you may want this too.
 }

private handleError( error: any ) {
    if ( error instanceof Response ) {//Backend Error
        //.json() parsing failed from server
        console.log( "Error:"+error.text() );
        return Observable.throw( error.text() );
    }
    //otherwise the server returned error code status
    return Observable.throw( error );
}

ngInit：

  this.dataService.getReview().subscribe(data=>{
      this.results=data;
  }),
  error=>{
      console.log( "ERROR:" + error );
  }

请注意，如果后端实际上返回的是单个对象而不是 1 个对象的数组，那么这将不起作用。如果是这种情况，您不能/不应该让服务器都返回 Review 数组在某些情况下，同一调用中的单个 Review 对象...