Utilisation de LocalForage avec angulaire 4

Question

J'ai une liste d'éléments (en utilisant un matériau angulaire2) qui peut être basculée et quand elle est ouverte/fermée, je veux enregistrer l'état dans localstorage.

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

Je n'ai pas la moindre idée, mais pourquoi [Expanded] exécute plusieurs fois ..

html

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

js

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

Answer 1

Ce n'est pas la solution la plus élégante, mais il fait le travail. En utilisant ChangeDetectionStrategy.OnPush En utilisant ChangeDetectionStrategy.OnPush je peux obtenir le résultat que je veux .. mais je vais probablement le retravailler plus tard et entre autres choses, je vais mettre à jour la solution à une approche similaire à celle que @Nehal a écrit.

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

Answer 2

Le problème est que vous faites une liaison de fonction avec [expanded]. Ainsi, à chaque fois que la détection de changement est exécutée, la fonction shouldBeExpanded passe encore et encore.

Option 1:

Si vous souhaitez continuer à utiliser shouldBeExpanded pour drapeau [élargi], vous pouvez utiliser la stratégie de détection OnPush de changement.

Lorsque j'ai testé cela, l'expansion et l'effondrement était peu glitchy. Essayez-le dans la démo

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

Option 2:

au lieu de se lier à une fonction, vous pouvez créer un tableau qui garde la trace de la drapeau pour chaque expansion. Vous pouvez initialiser le tableau en utilisant OnInit avec les valeurs stockées dans localstorage. Si la valeur n'est pas dans localstorage, vous pouvez affecter un indicateur par défaut. Chaque fois que l'état d'expansion change, mettez-le à jour dans le tableau et 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'); 
    } 

} 

chaque jour [expanded] dans le code HTML:

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

Plunker demo