Angular принимает Array в качестве объекта и не отображает значения

Question

Angular принимает Array в качестве объекта и не отображает значения

// Обновлено по ходу обсуждения

Я пытаюсь получить объекты JSON (Задачи) через http-запрос и анализировать их в своем собственном классе, чтобы отобразить их на моей HTML-странице (Task Overwiew).

Вот что я получаю:

Это массив json, который возвращает мой php:

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

1

angular angular5 html php typescript

Решение

Другие решения

Вы используете Angular версии 4 как минимум. В версии 4 команда Angular решила неявно анализировать результаты JSON, поэтому вам не придется писать JSON.parse(json.result) с каждым запросом Ajax.

В вашем примере вы заменили значение, возвращаемое сервером: result с steves и затем вы пытаетесь получить к нему доступ: data['steves'] но на скриншоте вы можете видеть, что значения уже извлечены неявным JSON-анализом Angular, и вы имеете дело с массивом объектов.

Так data['steves'], data['result'] и т. д. всегда будут неопределенными, потому что служба Angular HttpClient, которая заменила службу Http в версии 4, уже анализирует JSON, прежде чем она вернет данные.

Просто замените:
this.results = data['steves'];
с
this.results = data;
и все будет работать.

2

Источник

Accepted Answer

Во-первых, вы получаете не массив, а объект, поэтому вам нужно получить массив из объекта. 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))
});
}

2