Флажок установлен в локальном хранилище, используя Angular 7

Question

Я пытаюсь оставить флажок установленным даже после обновления страницы sh, пытаюсь сохранить отмеченные значения в локальном хранилище, но я не знаю, как сохранить флажок, установленный в angular 7

. html

<div *ngFor="let item of cityList; let i = index">
<label [for]="item+i"> {{item}} </label>
<input type="checkbox"class="save-cb-state" value="{{item.checked}}" [checked]="item.Checked" [id]="item+i" [name]="item" [(ngModel)]="item.Checked" (ngModelChange)="getCheckboxValues($event,item)">
</div>

.ts

getCheckboxValues(event, data) {

  let index = this.selectedCity.findIndex(x => x.order==data);
  if (event) {
    let obj = data;

    this.selectedCity.push(obj);

    let some;
    if(localStorage.getItem('cheked') === null ){
      some = [];
    } else{
      some = JSON.parse(localStorage.getItem('checked'));

    }
    some.push(this.selectedCity)
    localStorage.setItem('checked',JSON.stringify(some));
    localStorage.CBState = JSON.stringify(some);
  }
  else {

    this.selectedCity.splice(index, 1);
    localStorage.removeItem('checked');
    console.log(checked,'this got uncheked') 

  }
  // console.log(this.selectedCity);
}

Answer 1

При сохранении в локальное хранилище нет необходимости пытаться вставить выбранное значение в существующее значение - просто записывайте все, что у вас есть, в локальное хранилище каждый раз, когда изменяется состояние.

Подход, который я выбрал бы:

1. Получить названия городов
2. Извлечь выбранные города из локального хранилища и применить checked значение
3. При изменении флажка сохранить текущие выбранные города в локальное хранилище

Шаг 1 - загрузка городов

Вы получаете массив городов из вашего API. Для целей этого ответа я буду использовать массив строк, чтобы упростить его, но преобразовать его в использование объектов тривиально.

После того, как вы получили свои города, вам потребуется извлечь выбранные города из локального хранилища. , Я собираюсь сохранить список названий городов, разделенных запятыми, для этого примера, но вы можете сохранить любые уникальные значения, которые вы будете иметь sh.

component.ts

cityList: { name: string, checked: boolean }[];

ngOnInit() {
  this.getCities().subscribe((cities: string[]) => {
    const selected: string[] = [];

    const stored: string = localStorage.getItem('cities');    
    if (stored) {
      // split comma-separated string into array of city names
      selected.push(...stored.split(','));      
    }

    // map retrieved cities to our model, 
    // applying checked where we find a city in local storage
    this.cityList = cities.map(name => ({
      name: name,
      checked: selected.includes(name)
    }));
  });    
}

Ваш * В 1043 * есть несколько ненужных вещей. Вам не нужно управлять состоянием флажка, если вы используете компонент [(ngModel)].

. html

<div *ngFor="let city of cityList; let i = index">
  <label>
    {{city.name}}
    <input type="checkbox" [(ngModel)]="city.checked" (ngModelChange)="saveCities()" />
  </label>  
</div>

Шаг 2 - сохранение городов

Все довольно простые вещи. Функция saveCities() в component.ts выполняет сериализацию названий выбранных городов в локальное хранилище при каждом обновлении флажка.

component.ts

saveCities() {
  const selected: string[] = this.cityList
    .filter(x => x.checked)
    .map(x => x.name);

  const serialized: string = selected.join(',');
  localStorage.setItem('cities', serialized)
}

DEMO: https://stackblitz.com/edit/angular-rww9fr