Добавление подкласса для всех угловых моделей

Question

Я использую AngularJS для веб-приложения и пытаюсь читать данные из API.Таким образом, я сделал несколько моделей в соответствии с результирующим набором API.Среди многих моделей давайте поговорим об одной модели TYPE

//This is the JSON API is returning
{ 
   "records":[ 
      { 
         "ID":"1",
         "TYPE":"mythological"
      }
   ],
   "pagination":{ 
      "count":"1",
      "page":1,
      "limit":10,
      "totalpages":1
   }
}

Теперь я сделал следующую модель для TYPE

//type.ts
export class Type {
    "ID":string;
    "TYPE":string;  
}

После извлечения данных из API яуспешно сохранив его и запустив мой код, используя следующие компоненты TYPE t.

//gallery.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from 'src/app/services/data.service';
import { Type } from 'src/app/models/type';

@Component({
  selector: 'app-gallery',
  templateUrl: './gallery.component.html',
  styleUrls: ['./gallery.component.scss']
})
export class GalleryComponent implements OnInit {
  types: Type;
  constructor(private data: DataService) { }
  ngOnInit() {
  }
  clickfunction(){
    this.data.getData().subscribe(data=>{
        this.types=data.records;
        console.log(this.types);
    }); 
  } 
}

ALso, я получаю данные из этой службы

//data.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  dataUrl:string = 'http://localhost/api-slim/public/index.php/api/info/type';

  constructor(private http: HttpClient) { }

  getData() {
    return this.http.get(this.dataUrl);
  }

}

Хотя приложение работает, оно, очевидно, дает мнеследующая ошибка, которую мне нужно исправить.

Date: 2019-09-26T19:42:06.903Z - Hash: a1b41d5889df87ba0aa3
5 unchanged chunks

Time: 780ms
ℹ ｢wdm｣: Compiled successfully.

    ERROR in src/app/components/gallery/gallery.component.ts(23,21): error TS2339: Property 'records' does not exist on type 'Object'.

NOW

Данные pagination, которые предоставляет API, являются общими в каждом ответе API, но, как вы видите, ни одна из моих моделей не потребляет его.Что было бы лучшим способом хранить и использовать это pagination в каждой моей модели.Я попытался создать временный демонстрационный класс в gallery.component.ts следующим образом:

export class TEMP {
  records: TYPE[];
  pagination: [];
}

Но это ужасно.Есть ли эффективное исправление?

Answer 1

Ваш класс модели на самом деле не отражает ответ API.

Модель похожа на пользовательскую структуру данных, которую вы можете использовать как тип данных:

export TEMP { //consider renaming this to something more meaningful
   records: Array<Type>;
   pagination: Pagination;
}

export class Type {
   ID: string;
   TYPE: string;  
}

export Pagination{
   count: string;
   page: number;
   limit: number;
   totalpages: number;
}