找不到不同的支持对象错误Angular2

Question

尝试使用*ngIf从本地存储和显示中获取值（对象数组），但角度抛出Cannot find a differ supporting object的错误。这是Plnkr抛出错误

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>

似乎找不到permissionvar.root_permission_name，我不知道为什么？

Answer 1

事实上，当您单击"从LocalStorage获取"按钮时，您会从存储中获取字符串，而不是数组。因此，在尝试在ngFor:中使用它之前，您需要对其进行解析

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

看到这个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.
}

除此之外，要将json对象显示为HTML，您可以使用演示中所示的{{jsonobject|json}}jsonPipe。