Angular 6 - http получает отображение ответа на запрос объекта

Question

У меня есть файл JSON, который пытается загрузить с помощью запроса http и карты для класса модели.

У меня есть файл JSON

[
  {
    "firstName": "Dan1",
    "lastName": "Dan1"
  },
  {
    "firstName": "Dan2",
    "lastName": "Dan2"
  },
  {
    "firstName": "Dan3",
    "lastName": "Dan4"
  }
]

У меня есть такой код модели:

export class Record {
  firstName: string;
  lastName: string;
}

и такой компонент:

import {Component} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Record} from './models/record';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'CRM';
  apiUrl = './assets/test.json';
  itemList: Array<Record>;

  constructor(private http: HttpClient) {

    const obs = this.http.get<Record[]>(this.apiUrl, {responseType: 'json'});
    obs.subscribe((records: Record[]) => {
      this.itemList = records;
    });

  }
}

Вопросы:

1. Почему this.itemList не является массивом записей, несмотря натот факт, что я использую: this.http.get<Record[]> и (records: Record[]).Значит ли это, что Angular не будет отображать JSON в Array of Record?Если да, для чего нужны эти определения?

2. Можно ли как-нибудь это сделать без создания объекта вручную и помещения его в массив?

Answer 1

вы могли бы сделать что-то вроде:

this.itemList = records.map(r => Object.create(new Record(), r);

а почему?потому что я думаю.

Answer 2

ItemList не является массивом Record, потому что TypeScript - это в основном javascript с типизацией для компилятора.Компилятор просто проверяет.Если вы говорите, что http.get возвращает Record[], то компилятор полагает, что возвращенный объект будет иметь такую ​​структуру.

Вы сами должны сделать его массивом Record.Это довольно просто и должно быть сделано вручную, так же, как вы делаете это в JavaScript:

obs.pipe(
  map((records) => records.map((record) => Object.assign(new Record(), record)))
).subscribe((records: Record[]) => {
  this.itemList = records;
});

Небольшой совет, загляните в трубу async.Таким образом, вам не нужно подписываться внутри вашего компонента, и все это выглядит немного лучше.