Stack Overflow em Português Asked by Alexsandro Andrade on December 30, 2021
estou estudando angular ao implementar uma pequena aplicação de questionários me deparei com o seguinte problema. ao clicar no botão voltar, observei que as minhas opções selecionadas sumiam, existe alguma forma de manter essas escolhas salvas na tela ate que eu salve o questionário??
meu HTML
<div class="content">
<span class="etapas">Etapa 3 de 4</span>
<h2>{{pergunta?.dsPergunta}}</h2>
<p>Escolha até 3 opções</p>
<div class="box-questoes">
<ul>
<li *ngFor="let res of pergunta.respostas" (click)="insereResposta(res.cdResposta)"
[ngClass]="respostas?.includes(res.cdResposta) ? 'active' : ''">
<p>{{res.dsResposta}}</p>
<small>{{res.dsAssunto}}</small>
</li>
</ul>
</div>
<button (click)="addPergunta()" [routerLink]="[ '/comentario']" class="btn-basico" [disabled]="respostas?.length === 0">Continuar</button>
<a href="#" (click)="limpaRespostas()" [routerLink]="[ '/forma', cdPergunta, avaliacao]" class="link-bottom">Voltar</a>
</div>
</div>
<ngx-ui-loader></ngx-ui-loader>
meu TS
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { PesquisaService } from 'src/app/services/pesquisa.service';
import { Pergunta } from 'src/app/models/pergunta';
import { Resposta } from 'src/app/models/resposta';
@Component({
selector: 'app-questoes',
templateUrl: './questoes.component.html',
styleUrls: ['./questoes.component.scss']
})
export class QuestoesComponent implements OnInit {
avaliacao: number;
questoes: Resposta[];
selecionado = false;
pergunta: Pergunta;
respostas: number[];
cdPergunta: number;
formaResposta: number;
constructor(private route: ActivatedRoute, private pesquisaService: PesquisaService) {
this.respostas = [];
this.avaliacao = parseInt( this.route.snapshot.paramMap.get('avaliacao'));
this.formaResposta = parseInt(this.route.snapshot.paramMap.get('formaResposta'), 10);
}
ngOnInit() {
this.pesquisaService.getPerguntaResposta(3).subscribe(perguntaResponse => {
this.pergunta = perguntaResponse;
if(this.formaResposta == 14){
this.pergunta.respostas = this.pergunta.respostas.filter(a => a.cdResposta != 12);
}
if(this.avaliacao <= 2){
this.pergunta.dsPergunta = "O que MENOS você gosta?";
}if(this.avaliacao >= 4){
this.pergunta.dsPergunta = "O que MAIS você gosta?";
}
});
}
insereResposta(cdResposta: number) {
if (this.respostas.includes(cdResposta)) {
this.respostas.splice(this.respostas.indexOf(cdResposta), 1);
} else if (this.respostas.length < 3) {
this.respostas.push(cdResposta);
}
console.log(this.respostas);
}
addPergunta() {
this.pesquisaService.addPergunta(this.pergunta.cdPergunta, this.respostas);
}
limpaRespostas() {
this.pesquisaService.limpaRespostas();
}
}
O localStorage
é um tipo de armazenamento local do navegador, nele você armazena itens em chave-valor.
Temos alguns métodos:
window.localStorage.setItem(chave, valor)
window.localStorage.setItem("nome", "Alexsandro")
window.localStorage.getItem(chave)
window.localStorage.getItem("nome") // retorna "Alexsandro"
window.localStorage.removeItem(chave)
window.localStorage.removeItem("nome")
window.localStorage.clear()
Você poderia fazer algo como:
const formulario = {
nome: "Alexsandro",
email: "[email protected]"
};
window.localStorage.setItem("formulario", JSON.stringify(formulario));
var retorno = window.localStorage.getItem("formulario");
console.log(retorno);
Criei um exemplo no jsfiddle.
Para visualizar, se estiver usando o Google Chrome:
Inspecionar
Application
LocalStorage
LocalStorage
Answered by LeoHenrique on December 30, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP