Wie man ngClass mit ngFor basierend auf localStorage Wert hinzufügen

Question

Versuchen, active-span zu einem Element bei der Auswahl eines size hinzuzufügen, ist es ziemlich einfach in jQuery tun, aber ich bin ein bisschen verwirrt, wenn es in Angular. Wenn Sie also eine Größe von S/M/L auswählen, wird eine neue Klasse mit dem Namen active-span sowie beim Aktualisieren der Seite hinzugefügt, da die sizeVal in localStorage() gespeichert wird.

Ich versuchte mit ngClass, aber es ist nicht die Klasse div Element hinzufügen.

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 
    } 

Vorlage html -

<div *ngFor="let s of size" class="size" [ngClass]="{'active-span': sizeOptionStorage}" (click)="selectSize($event)"> 
    <span> {{ s }} </span> 
    </div> 

Hier ist ein plnkr zu replizieren, was ich versuche zu tun.

Sample Plnkr

In jQuery würde es so etwas wie dieses

$('.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

Sie können in variablen Stromwert speichern ändern müssen:

value: any; 

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

Und dann können Sie die Vorteile von NgClass nehmen Anweisung wie folgt:

<div *ngFor="let s of size" class="size" [ngClass]="{'active-span': s == value}" (click)="selectSize($event)"> 
    <span> 
     {{ s }} 
    </span> 
</div> 

Natürlich müssen Sie Code entfernen, der Brea ist king your app im moment:

if(sizeOptionSotrage == this.sizeOpt) { 
    // show active size from localStorage 
} 

Answer 2

1. sizeOptionSotrage! == sizeOptionStorage

Sie haben, um die Variable falsch in Ihrem constructor wegen eines Tippfehler .

2. Sie könnten das zu this.sizeOptionStorage