Cannot find another supporting Angular2 Error object

Question

Trying to get values ​​(array of objects) from local storage and display using *ngIf , but angular throws Cannot find a differ supporting object error. here is the plnkr throwing mistake

http://plnkr.co/edit/qgrOmRlUcAZq1spGALEa?p=preview

  <template ngFor #permissionvar [ngForOf]="LocalStorageData"> <li class="dropdown-submenu" *ngIf="permissionvar.root_permission_name == 'School Setting'"> <a (click)="Schoolsettings()"> <i class="fa fa-gears"></i> <span>School Settings</span> </a> <ul class="dropdown-menu"> <li>ABC</li> </ul> </li> </template> 

It seems I can’t find permissionvar.root_permission_name , I don’t know why?

Answer 1

In fact, when you click the "Get from LocalStorage" button, you get a string from the repository, not an array. Therefore, you need to parse it before trying to use it in ngFor:

 getData(){ this.LocalStorageData = JSON.parse(localStorage.getItem("DEMO data")); } 

See this plunkr: http://plnkr.co/edit/aumB4mMNVlV9TK5KDjoF?p=preview .

Answer 2

• http://plnkr.co/edit/7ff3o9oDhjAbt8yd3uST?p=preview

 getData(){ this.LocalStorageData =JSON.parse(localStorage.getItem("DEMO data")); //stringify data needs to be parsed to json. } 

In addition to this, to show the json object in HTML, you can use the {{jsonobject|json}} jsonPipe , as shown in the demo.