[英]TS2739 Type 'any[]' is missing the following properties from type 'JSON': parse, stringify, [Symbol.toStringTag]
[英]error TS2739: Type '{}' is missing the following properties from type
管理站.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;
});
}
}
管理站.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>
站.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;
}
}
終端錯誤
src/app/members/managestation/managestation.component.ts(66,10) 中的錯誤:錯誤 TS2739:“{}”類型缺少“Station”類型中的以下屬性:id、name、orgId、status
控制台輸出
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 []
在 console.log 中得到結果,但我不能在我的 html 組件文件中使用它
結果
[
[
{
"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"
}
]
]
您從 API 調用收到一個空對象{}
,您可能為 API 調用設置的數據類型是Station
。 此外, sta
類型是Station
: sta: Station;
. 您不能將空對象設置為sta
。
更新:
看起來你是allData
是一個可觀察的。
您還有另一個錯誤,請查看您的代碼:
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;
}
查看屬性,請注意。 問題是,如果您查看聲明,您會說這些屬性中的大多數不能為空,但是如果您查看構造函數,您會說相反,哪個是正確的?
我添加了allData[0]
並且它現在可以工作了
getStationsByOrg(id) {
this.staService.getStationsByOrg(id)
.then((allData) => {
console.log(allData);
this.sta = allData[0];
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.