以角度使用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; 
}

來源

2017-07-31 Mackelito

這還不是最完美的解決方案，但它的工作。通過使用ChangeDetectionStrategy.OnPush我可以得到我想要的結果..但是我稍後可能會重新做這件事，除此之外，我會用類似的方法更新解決方案，像@Nehal寫的。

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

來源

2017-08-01 07:50:02 Mackelito

問題是你正在做功能綁定與[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

來源

2017-07-31 16:05:37 Nehal

以角度使用LocalForage 4

回答

相關問題