以角度使用LocalForage 4

问题描述：

我有一个项目列表（使用角度材质2），可以切换，当打开/关闭时我想将状态保存在localstorage中。以角度使用LocalForage 4

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

我不知道为什么，但[扩展]运行多次..

HTML

<md-expansion-panel class="panel" (opened)="openPanel('a3')" (closed)="closePanel('a3')">

shouldBeExpanded(name: string) { 
    let item = localStorage.getItem(name); 
    return item; 
}

答

这还不是最完美的解决方案，但它的工作。通过使用ChangeDetectionStrategy.OnPush我可以得到我想要的结果..但是我稍后可能会重新做这件事，除此之外，我会用类似的方法更新解决方案，像@Nehal写的。

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

答

问题是你正在做功能绑定与[expanded]。所以，每次检测运行时，都会一次又一次地检测shouldBeExpanded函数。

选项1：

如果你想使用shouldBeExpanded为[扩展]标志保留，您可以使用OnPush变化检测策略。

当我测试这个时，扩展和崩溃是一点点的毛病。尝试一下在演示

TS：

import {Component, ChangeDetectionStrategy} from '@angular/core'; 
import {Http} from '@angular/http' 
import {bootstrap} from '@angular/platform-browser-dynamic'; 

import 'rxjs/add/operator/map' 

@Component({ 
    selector: 'material-app', 
    templateUrl: 'app.component.html', 
    changeDetection: ChangeDetectionStrategy.OnPush 
})

Plunker demo

选项2：

而不是与功能结合，可以创建，保持轨道的数组每个扩展标志。您可以使用OnInit初始化阵列，并将值存储在localstorage中。如果值不在本地存储中，则可以分配默认标志。每当扩展状态发生变化时，都要在数组中更新并且localstorage。

TS：

export class AppComponent implements OnInt { 

    private version: any; 

    items = ["a1", "a2", "a3"]; 
    expansionFlag = []; 

    constructor(http: Http) { 
    // Display the currently used Material 2 version. 
    this.version = http 
     .get('https://api.github.com/repos/angular/material2-builds/commits/HEAD') 
     .map(res => res.json()) 
    } 

    ngOnInit(){ 
    for(let i = 0; i <this.items.length; i++){ 
     let flag = JSON.parse(localStorage.getItem(this.items[i])); 
     console.log(flag); 
     if(flag != undefined && flag != null){ 
     this.expansionFlag.push(flag); 
     } 
     else 
     this.expansionFlag.push(false); 
    } 

    console.log(this.expansionFlag) 
    } 
    openPanel(name, index) { 
    console.log(name, 'is now open') 
    this.expansionFlag[index] = true; 
    localStorage.setItem(name, 'true'); 
    } 
    closePanel(name, index) { 
    console.log(name, 'is now closed'); 
    this.expansionFlag[index] = false; 
    localStorage.setItem(name, 'false'); 
    } 

}

更新在HTML中，每[expanded]：

[expanded]="expansionFlag[0]" 
[expanded]="expansionFlag[1]" 
[expanded]="expansionFlag[2]"

Plunker demo

以角度使用LocalForage 4

相关推荐