Angular：从 localStorage 中提取值并显示值答案

【问题标题】：Angular: Pull value from localStorage and display valuesAngular：从 localStorage 中提取值并显示值
【发布时间】：2021-06-06 14:35:08
【问题描述】：

我正在使用多选 mat-button-toggle-group 在 localStorage 中填充一个列表，但是当我尝试在我的页面上显示该值时，它返回为空。我错过了什么？

我有一个带有（更改）触发器和默认值的 mat-button-toggle-group [(value)]="productCookie"

<mat-button-toggle-group #group="matButtonToggleGroup" name="productSelect" aria-label="Font Style" multiple [(value)]="productCookie (change)=productFilter(group.value)>
    <mat-button-toggle *ngFor="let product of products" [value]="product.name">
      <a>{{product.name}}</a>
    </mat-button-toggle>
</mat-button-toggle-group>

在更改时设置 localStorage 中的值 (change)=productFilter(group.value)

productFilter($event){
  console.log("productFilter event value: " + $event)
  this.selectedProductFilter = $event

  // Testing
  console.log(this.selectedProductFilter)
  
  localStorage.setItem('productFilter', JSON.stringify(this.selectedProductFilter));
}

控制台输出选择3个选项后：

productFilter event value: Wii,Xbox,Playstation3
gaming-report.component.ts:280 (3) ["Wii", "Xbox", "Playstation3"]

然后我可以通过控制台 -> 应用程序 -> 本地存储验证这些值是否已设置

productFilter   ["Wii", "Xbox", "Playstation3"]

所以现在我尝试提取这些值：

ngOnInit() {
 this.getProductCookie();
}



getProductCookie(){
 if (localStorage.getItem('productFilter') === null){
  console.log("No filters found in localStorage")  
 }
 else{
  this.productCookie = JSON.parse(localStorage.getItem('productFilter'));
  console.log("localStorage Data Type: " + typeof this.productCookie)  //object      
  console.log("localStorage: " + this.productCookie)  // Wii,Xbox,Playstation3

 }  
}

控制台输出：

localStorage Data Type: object
localStorage: Wii,Xbox,Playstation3

值被拉取，并存储在 this.productCookie 中，所以我应该可以在我的 html 中使用 productCookie

<div>
    testing:
    {{productCookie|json}}
</div>

但它不显示任何内容 productCookie value is empty

编辑：将 {{productCookie}} 更改为 {{productCookie|json}} 现在开始打印了

testing: []

直到我开始选择选项 Selecting an option updates productCookie value

编辑：现在打印出来了

testing: [ "Wii", "Xbox", "Playstation3" ]

我做错了什么导致该 localStorage 值无法显示在 html 中？

【问题讨论】：

this.productCookie = localStorage.getItem('productFilter').split(',');真的应该给你一个破碎的数组。你为什么复制出正确的方式（JSON.parse）？
我一直在采取不同的方法来让它发挥作用。我将其改回this.productCookie = JSON.parse(localStorage.getItem('productFilter'));，但除了this.productCookie 不再出现在括号中之外，我没有看到任何改进。 localStorage 数据类型：object games-report.component.ts:270 localStorage：Wii,Xbox
由于你正在做的溢出，你正在将字符串从 localStorage 转换为一个数组（它是对象类型）。使用 JSON.parse 是正确的方法。所以你的问题仍然是你没有看到价值？你什么都看不见？或者类似 [object Object] 的东西？如果是这样，请使用 {{productCookie | json}} 在你的模板中..
正确，仍然没有显示值（我仅用于测试）最终目标是使用 localStorage 'productFilter' 值来设置我的按钮切换组的默认选择，因此[(value)]="productCookie" 我尝试使用 {{productCookie|json}} 只是为了看看是否可行，但它仍然显示为空值testing: []
Weird..from the code you've show this should work fine,除非我遗漏了一些明显的东西？ i 您的组件是否设置为 onPush？

标签： angular typescript local-storage default-selected