Comment ajouter ngClass à span avec ngFor basé sur la valeur de localStorage

Question

En essayant d'ajouter active-span à un élément lors de la sélection d'une taille, c'est assez simple de le faire en jQuery mais je suis un peu confus quand je le fais en Angular. Ainsi, lorsque vous sélectionnez une taille S/M/L, il ajoutera une nouvelle classe appelée active-span ainsi que lorsque la page est rafraîchie puisque la valeur de sizeVal est enregistrée dans localStorage().

J'ai essayé d'utiliser ngClass mais il n'ajoute pas la classe à l'élément div.

size: any;
sizeOpt:any;
private sizeOptionStorage = localStorage.getItem('sizeOpt');

  constructor() {
    this.size = ['XS', 'S', 'M', 'L', 'XL'];
  }

selectSize(event) {
    this.sizeOpt = event.target.innerText;
    localStorage.setItem('sizeOpt', this.sizeOpt);
    console.log(this.sizeOpt);
    // add class when size is selected
  }

template html --

     {{ s }} 

Voici un plnkr pour reproduire ce que j'essaie de faire.

Sample Plnkr

En jQuery, ce serait quelque chose comme ceci

$('.size').on('click', function () {
    spanText = $(this).text();
    localStorage.setItem('sizeOption', spanText);
    spanText = $(this).text();
    $('div.size').each(function () {
        $(this).removeClass('active-span');
    });
    $(this).addClass('active-span');
})

$('div.size').each(function () {
    if ($(this).html() == sizeOption) {
        $(this).addClass('active-span');
    }
});

Answer 1

Vous pouvez stocker la valeur actuelle dans une variable:

value: any;

selectSize(event) {
    this.sizeOpt = event.target.innerText;
    localStorage.setItem('sizeOpt', this.sizeOpt);
    this.value = localStorage.getItem('sizeOpt');
    console.log(this.sizeOpt);
}

Ensuite, vous pouvez profiter de la directive NgClass de cette manière:

        {{ s }}

Vous devez bien sûr supprimer le code qui casse actuellement votre application:

if(sizeOptionSotrage == this.sizeOpt) {
  // montrer la taille active depuis localStorage
}

Answer 2

1. sizeOptionSotrage !== sizeOptionStorage

You got the variable wrong in your constructor because of a typo.

2. You might need to change that to this.sizeOptionStorage

Translated to French:

1. sizeOptionSotrage !== sizeOptionStorage

Vous avez mal saisi la variable dans votre constructeur à cause d'une faute de frappe.

2. Vous devriez peut-être le changer en this.sizeOptionStorage