找不到不同的支持对象Error 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，如演示所示。