-1

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

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

我尝试使用 [selected] 但它仍然没有出现！请帮忙

谢谢

4

1 回答 1

0

那是因为您需要知道您在选择中处理的是哪种类型的数据以及如何正确映射该数据，我理解您的问题，因为一开始就有它们是正常的，所以这里有一些来自我的提示，说明如何处理在这种情况下，所有代码都已注释，如果您有不明白的地方，请随时询问更多信息。

Stackblitz：https ://stackblitz.com/edit/angular-qfncmm

HTML：

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

TS：

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

我将所有内容都存储在 localstorage 中，因为一旦您离开域，会话就会过期并删除所有数据，如果要永久保存，则需要存储在 localstorage 中，如果只想为会话保存，则使用 sessionStorage 很好使用一些 redux 模式，但为了保存一些数据，只需使用将所有数据存储在内存中的服务。

于 2019-11-15T11:11:14.497 回答