Angular 将 Array 作为对象并且不显示值

Question

// 随讨论更新

我尝试通过 http 请求获取 JSON 对象（任务）并将它们解析为我自己的 class 以在我的 HTML 页面（任务概览）上显示它们。

这是我得到的：

这是 json 数组我的 php returns:

    {"result":[{"id":"3","znumber":"vor21423"},{"id":"2","znumber":"vor213"}]}

这是我在 angular.io 上的最后一次尝试。我已经测试了很多答案，但其中大部分与 .json() 有关，它不再是 HTML 客户端的一部分。

export class ApiComponent {
 private apiUrl = 'http://localhost:81/work/get.php';

 results: Steve[];

 constructor(private http: HttpClient) {
 }

 ngOnInit() {
   this.getSteves();
 }

 getSteves() {
   this.http.get<ItemsResponse>(this.apiUrl)
      .subscribe(data => {
        this.results = data.result
          .map(steve => new Steve(steve.id, steve.zNumber));
            console.log(this.results);
            console.log(data);
      });
  }
}

界面

import { Steve } from './Steve';
export interface ItemsResponse {
  results: Steve[];
}

HTML

<div>
  <div *ngFor="let steve of results">
    <p> - {{steve.id}}</p>
    <p> - {{steve.zNumber}}</p>
  </div>
</div>

史蒂夫Class

export class Steve {
  public id = 0;
  public zNumber = '';

  constructor(id: number, zNumber: string) {
    this.id = id;
    this.zNumber = zNumber;
  }
}

API

<?php 
require_once('db.php');

$sql = 'SELECT * FROM jobs ORDER BY id DESC';
$result = $conn->query($sql);
if ($result->num_rows > 0) {
    $data = array();
    while($row = $result->fetch_assoc()){
        $data[] = $row;
    }
    echo json_encode(array('result' => $data));
} else {
    echo 0;
}
?>

Answer 1

您至少在使用 Angular 版本 4。在版本 4 中，Angular 团队决定隐式解析 JSON 结果，因此您不必为每个 Ajax 请求编写 JSON.parse(json.result)。

在您的示例中，您将服务器返回的值替换为 result steves 然后您尝试访问它：data['steves'] 但在屏幕截图中您可以看到这些值已经通过 Angular 隐式 JSON 解析提取，并且您正在处理一个对象数组。

因此data['steves']、data['result']等将始终未定义，导致Angular HttpClient服务，它在版本4中取代了Http服务，之前已经解析了JSON它 returns 数据。

只需更换： this.results = data['steves']; 和 this.results = data; 一切都会好起来的。

Answer 2

首先，你接收的不是一个数组，而是一个对象，所以你需要从对象中获取数组result。其次，如果你想让Steve的数组实例中的对象，你需要显式地告诉Angular。

你 ItemsResponse 实际上看起来像这样（注意 result 而不是 results）：

import { Steve } from './Steve';

export interface ItemsResponse {
  result: Steve[];
}

请求应该表明您正在收到类型为 ItemsResponse 的响应。

 getSteves() {
   this.http.get<ItemsResponse>(this.apiUrl)
     .subscribe(data => {
       // your array is in 'result' object of your response
       this.results = data.result
         // create instances of your class
         .map(steve => new Steve(steve.id, steve.znumber))
     });
  }

Angular 将 Array 作为对象并且不显示值

Angular takes Array as object and does not display the values

html

php

typescript

angular

angular5