Angular：從localStorage中拉取值並顯示值

Question

我正在使用多 select mat-button-toggle-group 在 localStorage 中填充一個列表，但是當我嘗試在我的頁面上顯示該值時，它返回為空。 我錯過了什么？

---

我有一個帶有（更改）觸發器和默認值[(value)]="productCookie"的 mat-button-toggle-group

<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 個選項后的控制台 Output ：

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

 }  
}

控制台 Output ：

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

該值被提取並存儲在 this.productCookie 中，所以我應該能夠在我的 html 中使用 productCookie

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

但它不顯示任何內容productCookie 值為空

編輯：將 {{productCookie}} 更改為 {{productCookie|json}} 現在打印

testing: []

直到我開始選擇選項選擇一個選項會更新 productCookie 值

編輯：現在打印

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

---

我做錯了什么導致此 localStorage 值無法顯示在 html 中？

Answer 1

上面的代碼是正確的，我的本地環境有問題。

查看https://stackblitz.com/edit/working-example-localstorage-default-buttons?file=src/app/button-toggle-appearance-example.ts