0

切り替えることができるアイテムのリスト（angular material2を使用）があり、開いたり閉じたりすると、状態をローカルストレージに保存したいと考えています。

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

理由はわかりませんが、[展開] が複数回実行されます..

html

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

js

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

2 に答える 2

1

問題は、 で関数バインディングを行っていることです[expanded]。そのため、変更検出が実行されるたびに、shouldBeExpanded関数が何度も繰り返されます。

オプション1：

shouldBeExpanded[expanded] フラグを使い続けたい場合は、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
})

プランカーのデモ

オプション 2:

関数でバインドする代わりに、展開ごとにフラグを追跡する配列を作成できます。OnInitに格納されている値を使用して、配列を初期化できますlocalstorage。値が 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');
  }

}

[expanded]html でそれぞれを更新します。

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

プランカーのデモ

于 2017-07-31T16:05:37.500 に答える