javascript - fel TS2739: Typen '{}' saknar följande egenskaper från typen

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;
    }
}

Terminalfel

FEL i src/app/members/managestation/managestation.component.ts(66,10): fel TS2739: Typen '{}' saknar följande egenskaper från typen 'Station': id, name, orgId, status

Konsolutdata

 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 []

Får resultatet i console.log men jag kan inte använda det i min HTML-komponentfil

Resultat

[
  [
    {
      "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"
    }
  ]
]

Svar #1

du har också ett annat fel, om man tittar på din kod:

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;
    }

titta på attributen och vänligen notera det. Problemet är att om du tittar på deklarationen säger du att de flesta av dessa attribut inte kan vara null, men om du tittar på konstruktorn säger du motsatsen, vilken är korrekt?

Svar #2

Du får ett tomt objekt {} från API-anropet och typen av data som du kan komma att ange för API-anropet är Station. Dessutom är sta-typen Station: sta: Station;. Du kan inte ange ett tomt objekt till sta.

Uppdatering:

Det ser ut som att din allData är ett observerbart objekt.