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

Question

// 随讨论更新

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

这是我得到的：

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

    {"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>

史蒂夫班

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

首先，你接收的不是一个数组，而是一个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))
     });
  }

Answer 2

您至少使用的是 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; 一切都会好起来的。