Сохраняйте и сохраняйте значения раскрывающегося списка после обновления страницы PrimeNG

Как я могу сохранить и сохранить раскрывающееся значение выпадающего элемента PrimeNG после обновления страницы?

https://www.primefaces.org/primeng/#/dropdown

HTML

<p-dropdown [options]="cities2" [(ngModel)]="selectedCity2" optionLabel="name"></p-dropdown>

TypeScript

   import {SelectItem} from 'primeng/api';

    interface City {
      name: string;
      code: string;
    }

    export class MyModel {
        cities2: City[];
        selectedCity2: City;

        constructor() {
            //An array of cities
            this.cities2 = [
                {name: 'New York', code: 'NY'},
                {name: 'Rome', code: 'RM'},
                {name: 'London', code: 'LDN'},
                {name: 'Istanbul', code: 'IST'},
                {name: 'Paris', code: 'PRS'}
            ];
        }
       ngOnInit(){
        localStorage.setItem('key', this.selectedCity2);
        const getItem = localStorage('key');
        this.selectedCity2 = getItem;


    }

typescript angular primeng local-storage primeng-dropdowns
person Noah Tony    schedule 21.05.2018    source источник

Ответы (1)


arrow_upward
-1
arrow_downward

Прежде всего, чтобы установить (или получить) объект javascript в (или из) localStorage, используйте метод JSON.stringify (или JSON.parse).

Затем в методе ngOnInit вы должны получить только значение, хранящееся в вашем локальном хранилище, и вы не должны обновлять его, как в своем коде.

Таким образом, этот метод становится:

  ngOnInit() {
    // get localStorage value
    this.selectedCity2 = JSON.parse(localStorage.getItem('key'));
  }

Наконец, каждый раз, когда вы выбираете элемент в элементе dropdown, вы должны обновлять его значение в localStorage следующим образом:

  saveInLocalStorage() {
    // update localStorage value
    localStorage.setItem('key', JSON.stringify(this.selectedCity2));
  }

См. StackBlitz.

person Antikhippe    schedule 21.05.2018
comment
Привет, я только что попробовал это в своем приложении, и я получаю следующий аргумент предупреждения об ошибке типа string | объект не может быть назначен параметру строкового типа. Тип OBject нельзя присвоить типу string. Если я удалю JSON.parse, предупреждение не будет отображаться, но тогда оно не будет работать - person Noah Tony; 22.05.2018
comment
Хорошо, после сохранения в локальном хранилище данные выглядят так, если я их получу: {'key:1, name:'Ney York', type:0, validFrom:2002-01-01T00:00:00.000Z}, но все еще не работает - person Noah Tony; 22.05.2018
comment
Вы добавили (onChange)="saveInLocalStorage()" в свой HTML? - person Antikhippe; 22.05.2018
comment
Это уже сохранено в локальном хранилище, вам не следует сохранять это снова. - person alecellis1985; 31.05.2020
comment
Нет, это не так. PrimeNG не сохраняет данные в вашем локальном хранилище. Это ваша работа. - person Antikhippe; 31.05.2020