Angular 离开页面时，使用sessionStorage将值保留在select values中

好吧，标题几乎说明了一切

我正在使用angular的sessionStorage来存储表单中选定的一些值，并在用户返回表单时将它们再次显示为选定值。我面临的问题是，我可以存储这些值并恢复它们，但我无法在选择输入中选择它们

我尝试使用[selected]，但它仍然没有显示！请帮忙

---

谢谢你

这是因为你需要知道你在选择中处理的数据类型以及如何正确映射这些数据，我理解你的问题，因为一开始有这些数据是正常的，所以这里有一些我的提示，说明如何处理这种情况，所有代码都有注释，如果你不了解一些事情，请随时询问更多信息

闪电战：

HTML:

---

我将所有内容都存储在localstorage中，因为会话存储一旦离开域，会话将过期并删除所有数据如果要持久保存，则需要将其存储在localstorage中，如果只想保存会话，则使用sessionStorage可以使用某种redux模式，但是要保存一些数据，只需使用一个将所有数据存储在内存中的服务。

您能显示您的代码吗？因此，当我想在localStorage中存储我的值时，我会创建一个新对象，并将localStorage中的值存储在其属性中，然后当obj.name等于obj2.name时，我会将布尔值vraiable设置为true，然后在我的html中[selected]=“booleanVariable”所以我不知道我做错了什么我创建了一个stackblitz也许可以帮助：

<p>Select with only string</p>


<select  [(ngModel)]="selectedValue">
<!--  You cant bind in value an object you need to bind string ids-->
  <option [value]="x.name" *ngFor="let x of selectData">{{x.name}}</option>
</select>

<p>You just selected to be</p><strong>{{selectedValue}}</strong>


<p>Save data in localstorage</p>
<button type="button" (click)="saveData()">SAVE IT</button>
<button type="button" (click)="fetchData()">FETCH IT</button>

<hr>

<p>Select with object data</p>


<select  [(ngModel)]="selectedObject">
  <!--  You can bind object with ngValue-->
  <option [ngValue]="x" *ngFor="let x of selectData">{{x.name}}</option>
</select>

<p>You just selected to be</p> <strong>{{selectedObject?.id}} - {{selectedObject?.name}}</strong>


<p>Save data in localstorage</p>
<button type="button" (click)="saveDataObject()">SAVE IT</button>
<button type="button" (click)="fetchDataObject()">FETCH IT</button>

import { Component } from '@angular/core';

// tslint:disable-next-line:class-name
interface DataI {
  id: number;
  name: string;
}

const data: DataI[] = [
  {id: 1, name: 'Markus'},
  {id: 2, name: 'Anna'},
  {id: 3, name: 'Jhon'},
  {id: 4, name: 'Lori'},
];

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  selectData: DataI[];
  selectedValue: string;
  selectedObject: DataI;

  constructor() {
    this.selectData = data;
  }


  // In case you want to store object, the local and session storage don't accept objects, so you need to stringify them
  saveDataObject() {
    localStorage.setItem('selectedObj', JSON.stringify(this.selectedObject));
    // Refresh the page only for the example of rivisiting the app
    location.reload();
  }

  // When you fetch them just parse the string in json
  fetchDataObject() {
    this.selectedObject = JSON.parse(localStorage.getItem('selectedObj'));
    this.mapSelectedData();
  }

  /* When you fetch the object the data will not be displayed on the select because in javascript you can't
  assume that a obj equal to another obj only because they share same data so you need the original reference used
   */

  mapSelectedData() {
    this.selectedObject = this.selectData
      .filter(x => x.id === this.selectedObject.id)
      .map(x => x)
      .reduce(x => x);
  }


  saveData() {
    localStorage.setItem('selected', this.selectedValue);
    // Refresh the page only for the example of rivisiting the app
    location.reload();
  }

  fetchData() {
    this.selectedValue = localStorage.getItem('selected');
  }
}