Angular 使用带有角度4的localfowse

我有一个可以切换的项目列表（使用angular material2），打开/关闭时，我希望将状态保存在localstorage中

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

html

---

问题是您正在使用

[扩展]

进行函数绑定。因此，每次运行更改检测时，它都会反复检查

应该扩展的
函数

选项1:

如果您想继续使用[expanded]标志的
shouldBeExpanded
，您可以使用
OnPush
更改检测策略

当我测试这个的时候，膨胀和崩溃都是小故障。在演示中尝试一下

ts:


选项2:

您可以创建一个数组来跟踪每个扩展的标志，而不是绑定函数。您可以使用存储在
localstorage
中的值，使用
OnInit
初始化数组。如果值不在localstorage中，则可以指定默认标志。每当扩展状态更改时，在阵列和
localstorage
中更新它

ts:

这不是最优雅的解决方案，但它确实起到了作用。
通过使用ChangeDetectionStrategy.OnPush，我可以得到我想要的结果。。但我可能会在稍后重新编写，除此之外，我会将解决方案更新为@Nehal所写的类似方法


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

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

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
})

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]="expansionFlag[0]"
[expanded]="expansionFlag[1]"
[expanded]="expansionFlag[2]"