Angular将Array作为对象，不显示值

Question

//在讨论中更新

我尝试通过http请求获取JSON对象（Tasks）并将它们解析到我自己的类中，以便在我的HTML页面上显示它们（Task Overwiew）。

这就是我得到的：

这是我的php返回的json数组：

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

这是我在angular.io的turtorial上的最后一次尝试。我已经测试了很多答案，但大部分都与.json()有关，而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); }); } } 不再是HTML客户端的一部分。

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

界面

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

HTML

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

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

史蒂夫班级

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

API

Select user, attributes 
From Data 
Order By DATE desc
fetch first 1 rows only;

Answer 1

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

在您的示例中，您使用result替换了服务器steves返回的值，然后您尝试访问它：data['steves']但是在屏幕截图中您可以看到值已经已由Angular隐式JSON解析提取，您正在处理一组对象。

因此，data['steves']，data['result']等将始终未定义，因此在版本4中替换Http服务的Angular HttpClient服务在返回数据之前已经在解析JSON。

只需更换： this.results = data['steves']; 同 this.results = data; 一切都会奏效。

Answer 2

首先，您没有收到数组，而是一个Object，因此您需要从对象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))
     });
  }