0

I have an If condition in html to check permission to access a particular page :

    *ngIf="permission?.product-report?.list_product_report"

product-report is a static name which gives directly to the condition

When I execute it, got an error as below:

    Property 'report' does not exist on type 'ProductComponent'.

Why this error occurs ? Someone please help me..

Dane Brouwer
  • 2,827
  • 1
  • 22
  • 30
Micku
  • 71
  • 1
  • 12
  • It should be `product_report` not `product-report` – Dane Brouwer May 12 '21 at 09:53
  • @DaneBrouwer: I want product-report . – Micku May 12 '21 at 09:55
  • 1
    In your question - `"product_report is a static name"` – Dane Brouwer May 12 '21 at 09:56
  • @DaneBrouwer : if i changed this here ... then i need to chnage many pages... So any other solution for this particular problem? – Micku May 12 '21 at 10:01
  • Does [this](https://stackoverflow.com/questions/7122609/how-do-i-reference-a-javascript-object-property-with-a-hyphen-in-it) answer your question? – Dane Brouwer May 12 '21 at 10:03
  • Does this answer your question? [How do I reference a JavaScript object property with a hyphen in it?](https://stackoverflow.com/questions/7122609/how-do-i-reference-a-javascript-object-property-with-a-hyphen-in-it) – Eyeslandic May 13 '21 at 12:41

2 Answers2

2

You might have to use an inelegant solution of mixing dot notation and bracket notation

*ngIf="permission['product-report']?.list_product_report"

The above solution might throw an error when 'product-report' is defined and list_product_report is not. I'm not sure of the behavior when safe navigation operator is appended to a property fetched using bracket notation. Here you might have to forgo the safe navigation operator and check each property manually.

*ngIf="permission 
  && permission['product-report']
  && permission['product-report']['list_product_report']"
ruth
  • 29,535
  • 4
  • 30
  • 57
1

you need to use square bracket notation to get that key

For Example

  <div *ngIf="permission && permission['product-report'] && permission['product-report']['list_product_report']""></div>
Kiran Mistry
  • 2,614
  • 3
  • 12
  • 28
  • This would throw `undefined` errors in the console during run time if either of the properties `'product-report'` or `'list_product_report'` aren't defined. Each has to be checked individually: `*ngIf="permission && permission['product-report'] && permission['product-report']['list_product_report']"` – ruth May 12 '21 at 11:08
  • yes Michael typo mistake – Kiran Mistry May 12 '21 at 11:25