2 votes

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

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

2voto

Stefan Svrkota Points 22664

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
}

0voto

Pytth Points 212
  1. sizeOptionSotrage !== sizeOptionStorage

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

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

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X