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-modalponent';
import { EditStaModalComponent } from 'src/app/modal/station/edit-sta-modal/edit-sta-modalponent';
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: './managestationponent.html',
styleUrls: ['./managestationponent.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;
});
}
}
managestationponent.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>{{ sId }}</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;
thisId = orgId;
this.address = address;
this.status = status;
}
}
Terminal Error
ERROR in src/app/members/managestation/managestationponent.ts(66,10): error TS2739: Type '{}' is missing the following properties from type 'Station': id, name, orgId, status
Console Output
Array [ (4) […] ]
managestationponent.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 ponent 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"
}
]
]
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.ponent';
import { EditStaModalComponent } from 'src/app/modal/station/edit-sta-modal/edit-sta-modal.ponent';
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.ponent.html',
styleUrls: ['./managestation.ponent.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.ponent.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>{{ sId }}</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;
thisId = orgId;
this.address = address;
this.status = status;
}
}
Terminal Error
ERROR in src/app/members/managestation/managestation.ponent.ts(66,10): error TS2739: Type '{}' is missing the following properties from type 'Station': id, name, orgId, status
Console Output
Array [ (4) […] ]
managestation.ponent.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 ponent 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"
}
]
]
- Initial glance, if youre getting an array of stations back, this property: sta: Station; should be sta: Station[]; – Chris Bendel Commented Dec 13, 2019 at 16:05
-
have try using
sta: Station[];it still not working – Dominion Commented Dec 13, 2019 at 16:20
3 Answers
Reset to default 2you 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;
thisId = 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?
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.
I added allData[0] and it working now
getStationsByOrg(id) {
this.staService.getStationsByOrg(id)
.then((allData) => {
console.log(allData);
this.sta = allData[0];
});
}