Присвойте JSON значение объекта ответа Angular объекту класса модели.

Question

Я получаю следующий ответ от API.

{
    'firstName' : 'Sam',
    'lastName' : 'Thomson',
    'employeeAge' : 12 
}

В моем коде Angular я пытаюсь отобразить ответ JSON на модель класса Angular. Вот модель класса.

export class Employee{
    constructor(){
        this.empage = 0;
    }
    public firstName : String;
    public lastName : String;
    public empage : Number;
}

Вот код для вызова API.

this.http.get('/api').subscribe((result : Employee) =>{
      let emp = new Employee();
      Object.assign(emp, result);
      console.log('Result is ', emp);
    })

Получен следующий результат:

{empage: 0, firstName: "Sam", lastName: "Thomson", age: 12}

Как видно выше age из ответа не отображается на empage из экземпляра модели. Как добиться того же, не делая имена свойств одинаковыми?

Ожидаемый результат:

{empage: 12, firstName: "Sam", lastName: "Thomson"}

Answer 1

Обратите внимание на две вещи

1. В операторе this.http.get('/api').subscribe((result: Employee) предполагается, что ответ имеет тип Employee, тогда как это не так. Лучше заменить его на result: any.
2. Насколько я знаю, не существует собственного способа сопоставить объект одного типа другому типу. Ниже приведен обходной путь для вашего конкретного c требования с использованием Object.keys()

export class AppComponent implements OnInit  {
  private employeeMap = ((source): Employee => {
    const result = new Employee();
    Object.keys(source).map((key) => {
      if (key === 'employeeAge') {
        result['empage'] = source[key];
      } else {
        result[key] = source[key];
      }
    });
    return result;
  });

  ngOnInit() {
    this.jsonService.getData().subscribe(
      (result: any) => {
        let emp: Employee = this.employeeMap(result);
        console.log(emp);
      }
    );
  }
}

Рабочий пример: Stackblitz

Answer 2

Вы можете использовать перегруженную версию метода Object.assign, который принимает три параметра, вы можете передать третье значение как объект, для которого вы хотите переопределить значения Ссылочная ссылка :

Просто используйте:

Object.assign(emp, result, {empage: result.employeeAge});