error TS2739: Type '{}' is missing the following properties from type

Question

managestation.ts

import { Component, OnInit } from '@angular/core';
import { Station } from 'src/app/_models/station';
import { StationService } from 'src/app/_services/station.service';
import { AddStaModalComponent } from 'src/app/modal/station/add-sta-modal/add-sta-modal.component';
import { EditStaModalComponent } from 'src/app/modal/station/edit-sta-modal/edit-sta-modal.component';
import { DataSharingService } from 'src/app/_services/data-sharing.service';
import { ActivatedRoute, Router, NavigationEnd } from '@angular/router';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-managestation',
  templateUrl: './managestation.component.html',
  styleUrls: ['./managestation.component.scss'],
})
export class ManagestationComponent implements OnInit {
  sta: Station;
  mySubscription: any;

  constructor(
    private dataSharing: DataSharingService,
    private staService: StationService,
    private activatedRoute: ActivatedRoute,
    private router: Router
  ) {}
  getStationsByOrg(id) {
      this.staService.getStationsByOrg(id)
      .then((allData) => {
        console.log(allData);
         this.sta = allData;
      });
    }
}

managestation.component.html

<ion-content class="body">
  <ion-button expand="block" (click)="onAddStation()">Add Station
    <ion-icon name='add' slot="end"></ion-icon>
  </ion-button>
  <ion-list>
    <ion-item *ngFor="let s of sta">
      <ion-label>{{ s.name }}</ion-label>
      <ion-label>{{ s.orgId }}</ion-label>
      <ion-icon name='create' slot="end" (click)="onEditStation(s.id)"></ion-icon>
      <ion-icon name='trash' slot="end" (click)="onDeleteStation(s.id)"></ion-icon>
    </ion-item>
  </ion-list>
</ion-content>

station.ts

import { StationStatus } from './station-status.enum';

export class Station {
    id: number;
    name: string;
    orgId: number;
    address?: string;
    status: StationStatus;

    constructor(id?: number, name?: string, orgId?: number, address?: string, status?: StationStatus) {
        this.id = id;
        this.name = name;
        this.orgId = orgId;
        this.address = address;
        this.status = status;
    }
}

Terminal Error

ERROR in src/app/members/managestation/managestation.component.ts(66,10): error TS2739: Type '{}' is missing the following properties from type 'Station': id, name, orgId, status

Console Output

 Array [ (4) […] ]
managestation.component.ts:65:16

(1) […]
​
0: (4) […]
​​
0: Object { id: 5, orgId: 2, name: "BitCo Gas Jos North", … }
​​
1: Object { id: 6, orgId: 2, name: "BitCo Gas Awolowo Road ", … }
​​
2: Object { id: 7, orgId: 2, name: "BitCo Gas Kano Central", … }
​​
3: Object { id: 8, orgId: 2, name: "BitCo Gas Efik", … }
​​
length: 4
​​
<prototype>: Array []
​
length: 1
​
<prototype>: Array []

Am getting the result in console.log but i can't use it in my html component file

Result

[
  [
    {
      "id": 9,
      "orgId": 3,
      "name": "Conap Corp Ikeja",
      "address": "23, Ogunlowo Street, Obafemi Awolowway. Ikeja, Lagos",
      "status": "active"
    },
    {
      "id": 10,
      "orgId": 3,
      "name": "Conap Corp Ota",
      "address": "23, Ogunlowo Street, Obafemi Awolowway. Ikeja, Lagos",
      "status": "active"
    },
    {
      "id": 11,
      "orgId": 3,
      "name": "Conap Corp Agbara",
      "address": "23, Ogunlowo Street, Obafemi Awolowway. Ikeja, Lagos",
      "status": "active"
    },
    {
      "id": 12,
      "orgId": 3,
      "name": "Conap Corp Agbado",
      "address": "23, Ogunlowo Street, Obafemi Awolowway. Ikeja, Lagos",
      "status": "active"
    }
  ]
]

Answer 1

You receive an empty object {} from the API call and the type of data you might set for the API call is Station . Also, the sta type is Station : sta: Station; . You cannot set an empty object to sta .

Update:

Looks like you are allData is an observable.

Answer 2

you also have another error, looking at your code:

export class Station {
    id: number;
    name: string;
    orgId: number;
    address?: string;
    status: StationStatus;

    constructor(id?: number, name?: string, orgId?: number, address?: string, status?: StationStatus) {
        this.id = id;
        this.name = name;
        this.orgId = orgId;
        this.address = address;
        this.status = status;
    }

look at the attributes and please, note that. The problem is that if you look at the declaration, you are saying that most of those attributes can't be null, but if you look at the constructor, you are saying the opposite, which one is correct?

Answer 3

I added allData[0] and it working now

  getStationsByOrg(id) {
      this.staService.getStationsByOrg(id)
      .then((allData) => {
        console.log(allData);
         this.sta = allData[0];
      });
    }