Angular11: Type 'Subscription' is missing the following properties from type 'HomeData':

Question

I'm trying to retrieve data from a backend server but I get the following error: Type 'Subscription' is missing the following properties from type 'HomeData': aSes, aggregatorChanges, announces, beaconAnnouncements, and 11 more.

I'm using the following service

export class HomeService {

  constructor(private http: HttpClient) { }


getData(): Observable<HomeData>{
  return this.http.get<HomeData>('https://bgpie.net/api/rrc/00');

}
}

and the following interface:

export interface HomeData{
aSes: number;
aggregatorChanges: number;
announces: number;
beaconAnnouncements: number;
beaconSequences: number;
beaconWithdrawals: number;
cPs: number;
containingLoops: number;
containsAggregator: number;
moreThanOneAsOrigin: number;
prefixes: number;
prefixv4: number;
prefixv6: number;
sequences: number;
withdraws: number;
}

I call getData() in my component like this:

export class HomeComponent implements OnInit {
  elements!: HomeData;
  constructor(private http: HttpClient,
              private homeService: HomeService) {
   }

  ngOnInit(): void {
    this.elements = this.homeService.getData().subscribe((data: HomeData) => {this.elements = data; });
  }

I put all this in my html template

<ul>
  <li *ngFor = "let element of elements">
    Total number of Sequences: <b>{{element.sequences}}</b>
    <br>Distinct Prefixes involved in Sequences: <b>{{element.prefixes}}</b>
    <br>BGP Updates involved in Sequences: /// (Announces: <b>{{element.announces}}</b>, Withdrawals: <b>{{element.withdraws}}</b>)
    <br>Total number of BGP Updates collected by RRC00 in 2019: /// (Announces: ///, Withdraws: ///)
    <br>Percentage of BGP Updates belonging to Sequences: /// (Announces: ///, Withdrawals: ///)
    <br>Distinct Collctor Peers (CPs) that observed at least a Sequences: <b>{{element.cPs}}</b>
    <br>Distinct ASes originating the prefexes involved in the Sequences: <b>{{element.aSes}}</b>
    <br>Number of AB-BA Sequences (whose AS-path contains pattern xAyBz and x'By'Az'): <b>{{element.containingLoops}}</b>
    <br>Sequences that are originated by an IPv4 Prefix: <b>{{element.prefixv4}}</b>
    <br>Sequences that are originated by an IPv6 Prefix: <b>{{element.prefixv6}}</b>
    <br>Sequences whose prefix is announced by more than one AS: <b>{{element.moreThanOneAsOrigin}}</b>
    <br>Sequences that contain at least one announcement with the BGP Path Attribute Aggregator set: <b>{{element.containsAggregator}}</b>
    <br>Sequences that contain at least two announcement with different values of the BGP Path Attribute Aggregator: <b>{{element.aggregatorChanges}}</b>
    <br>Sequences originated by a known beacon prefix: <b>{{element.beaconSequences}}</b>
    <br>BGP Updates originated by a known beacon prefix: <b>{{element.beaconAnnouncements + element.beaconWithdrawals}}</b> (Announcements: {{element.beaconAnnouncements}}, Withdrawals: {{element.beaconWithdrawals}})
    <br>Percentage of BGP Updates originated by a known beacon prefix: /// (Announcements: ///, Withdrawals: ///)
  </li>
</ul>

score 2 · Accepted Answer · answered Mar 28 '21 at 12:20

2

You're assigning the subscription to the variable elements. Instead it should be the following

ngOnInit(): void {
  this.homeService.getData().subscribe(
    (data: HomeData) => { this.elements = data; },
    (error: any) => { /* handle error */ }
  );
}

answered Mar 28 '21 at 12:20

ruth

29,535
4
30
57

Error ha disappeared now but data still won't show, if I open the developer console on the browser i get the following errors: -Access to XMLHttpRequest at 'https://bgpie.net/api/rrc/00' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. -GET https://bgpie.net/api/rrc/00 net::ERR_FAILED – Maurizio Brini Mar 28 '21 at 12:24
1

That issue is related to CORS, completely unrelated to the issue in question. You need to adjust response headers and/or setup a proxy in the front-end. You could start here: https://stackoverflow.com/q/47345282/6513921 – ruth Mar 28 '21 at 12:57

Angular11: Type 'Subscription' is missing the following properties from type 'HomeData':

1 Answers1