Angular-使用本地存储保存下拉列表状态

Question

当我更改“下拉列表”值并单击“保存”按钮时，该值将在本地存储中另存为“ ng2-webstorage | packagingoptions [“是”]“

刷新页面时，我希望所选值仍显示为[“是”] 但即使它已正确保存到本地存储中，它仍会恢复为默认值。

刷新后，所有我的文本输入都会保存，但下拉列表中不会保存。

Here is an Image of the Problem I am facing

有什么建议吗？

谢谢。

    //HTML 
    <ngx-select-dropdown [options]="packagingOptions" formControlName="packOpt" 
    [(value)]="dataModel4" [multiple]="false"></ngx-select-dropdown>

   <button (click)="setLocalStorage()">Save Progress</button>

      //Component.ts
import { Component, ViewEncapsulation, Input, OnInit } from '@angular/core';
import * as jsPDF from 'jspdf'
import { FormBuilder, FormGroup, Validators } from '@angular/forms'
import * as html2canvas from 'html2canvas';
import { AppComponent } from "../../app.component"
import {Ng2Webstorage, LocalStorageService} from 'ngx-webstorage'

@Component({
moduleId: module.id,
providers: [AppComponent],
selector: 'app-prod-1',
templateUrl: './product-1.component.html',
styleUrls: ['./product-1.component.scss'],
encapsulation: ViewEncapsulation.None,
})
 export class Product1Component implements OnInit {
   packagingOptions = [
  'Yes', 'No'
  ];
   dataModel4: string;
   constructor(private fb: FormBuilder, private comp: AppComponent 
   private localSt:LocalStorageService) {
   this.rForm = fb.group({
  'packOpt': [this.localSt.retrieve('PackagingOptions')]
  });
  }
      setLocalStorage(){
      this.localSt.store('PackagingOptions', this.dataModel4);
      }
   }