Преобразование наблюдаемого ответа JSON в массив угловых (машинописных) объектов

Question

У меня есть сервисный API, который извлекает данные из Django-REST.Возвращенный JSON выглядит следующим образом:

[
{
    "manufacturer": "Mfg",
    "model": "Model",
},
{
    "manufacturer": "Mfg2",
    "model": "Model2",
}
]

Функция API службы getData возвращает:

return this.httpClient.get(`${this.apiURL}/data/`);

Примечание. Я использую ListAPIView в Django и убедился, что приведенный выше URL возвращаетобъект JSON, показанный выше (хотя мне нужно добавить? format = json, чтобы получить необработанные данные вне APIView Django).

Затем у меня есть угловой компонент, который вызывает функцию API сервиса для преобразования наблюдаемого вмассив объектов:

export class Data implements OnInit {

private records = Array<object> = [];

...

constructor(private  apiService:  ApiService) {}

ngOnInit() {
  this.getData();
}

public getData() {
 this.apiService.getData().subscribe((data: Array<object>) => {this.records = data});

Нет ошибок или предупреждений, но в HTML-файле компонента, когда я пытаюсь получить доступ к массиву записей, он всегда имеет длину 0. Например, следующее напечатает "0 "и пустая таблица.

<P> {{ records.length }}</P>
<table>
  <tr>
    <th>Manufacturer</th>
  </tr>
  <tr *ngFor="let record of records">
    <td> {{ record.manufacturer }} </td>
  </tr>
</table>

Что мне не хватает?

Answer 1

вам нужно добавить асинхронный канал к нему.

<tr *ngFor="let record of records|async">
    <td> {{ record.manufacturer }} </td>
  </tr>

Answer 2

Если вы определяете модель с использованием интерфейса, а затем используете этот интерфейс в качестве универсального параметра для вызова get, HttpClient автоматически сопоставит ответ с определенной структурой.

Например:

Интерфейс

export interface Product {
  manufacturer: string;
  model: string;
}

Служба данных

return this.httpClient.get<Product[]>(`${this.apiURL}/data/`);

Компонент

private records: Product[];

public getData() {
 this.apiService.getData().subscribe((data: Product[]) => this.records = data);

Шаблон

<div *ngIf="records">
 <p> {{ records.length }}</p>
 ...
</div>

При первом появлении шаблона процесс асинхронного извлечения данных может еще не завершиться.Поэтому, поместив ngIf вокруг страницы, он не будет пытаться отобразить элементы, пока не будут получены данные.