Angular : Property 'data' does not exist on type 'Object' on ng build --prod

Question

Property 'data' does not exist on type 'Object' on ng build --prod.

My service.ts

getSlogan() {
 return this.http.get(this._slogan)
}

My component.ts

import ...
.
.
export interface Iheader {
  facebook_link: string
  id: number
  instagram_link: string
  line_link: string
  pinterest_link: string
  site_slogan: string
  tel: string
  youtube_link: string
 }
 export class HeaderComponent implements OnInit {

 socials : any
 data : Iheader

 ngOnInit() {
 // get site data
  this.apiservice.getSlogan()
   .subscribe(data => {
    this.socials = data
  });

My html

<a target="_blank" [href]="socials?.data.pinterest_link">

It's error "Property 'data' does not exist on type 'Object'" on ng build --prod.

My api data look like

 [
   status: 200,
   data: {
     data: {
       pinterest_link: "url"
     }
   }
 ]

Check this link :https://stackoverflow.com/questions/40097820/property-does-not-exist-on-type-object-observable-subscribe — soorapadman, Jan 25 '19 at 06:04
Observable : in service is not working. Observable<{ testDataArray: any }> in service is error. — Don Noinongyao, Jan 25 '19 at 06:19

Mahmoud Fawzy · Accepted Answer · 2019-01-25T06:50:49.123

1

it looks like you stored the whole server response in socials variable.

so you need to access the data like this:

<a target="_blank" [href]="socials?.data.data.pinterest_link">

Or

the better solution is to store it first like this

ngOnInit() {
   // get site data
   this.apiservice.getSlogan()
   .subscribe(response => {
      this.socials = response.data
   });
}

and you need to set the socials variable to something by default like empty array.

socials : any = []

edited Jan 25 '19 at 06:50

answered Jan 25 '19 at 06:33

Mahmoud Fawzy

1,635
11
22

I tried res.data still not working on ng build --prod. It's error massage is "Property 'pinterest_link' does not exist on type'Object'." – Don Noinongyao Jan 25 '19 at 06:38
1

It's work on public socials: any = []. Thank you very much. – Don Noinongyao Jan 25 '19 at 06:47

score 1 · Answer 2 · answered Jan 25 '19 at 06:33

socials?.data.pinterest_link should be the error. "socials?" just checks, if its undefined/null or defined. But if it's defined, it does not guarantee, that the property "data" exist on the object. You need something like "socials?.data?", but the href will have errors.

Furthermore, you have a double nested "data". Maybe this is also an error.

Do it like

 <a target="_blank" [href]="socials && socials.data ? socials.data.pinterest_link : ''">

Angular : Property 'data' does not exist on type 'Object' on ng build --prod

2 Answers2