从下拉列表中保留选定的选项

我有不同选项的下拉列表。我希望将选定的选项保留在下拉列表的顶部，直到用户更改它。现在，如果我选择任何选项，我走出去的组件，然后再回来，下拉与第一值重置....从下拉列表中保留选定的选项

HTML

<select class="form-control-mb-12" 
       (change)="intSelection($event.target.value)" > 

        <option value="1/4">1/4</option> 
        <option value="1/8">1/8</option> 
        <option value="1/16">1/16</option> 
        <option value="1/32">1/32</option> 
</select>

组件

import { Component, OnInit } from '@angular/core'; 
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap'; 
import { ModuladorService } from 'app/Services/modulador.service' 

@Component({ 
    selector: 'app-resumen', 
    templateUrl: './resumen.component.html', 
    styleUrls: ['./resumen.component.scss'], 
    providers: [ModuladorService] 
}) 
export class ResumenComponent implements OnInit { 

    intSelected : string = "" ; 

    constructor(private _moduladorService:ModuladorService) { 

     this.intSelected = this._moduladorService.obtenerParametros(); 

    } 




    ngOnInit() { 

    } 

    intSelection(value){ 

    switch(value) { 
    case "1/4": 
    this.intSelected = value; 
     break; 
    case "1/8": 
    this.intSelected = value;   
     break; 
    case "1/16": 
    this.intSelected = value; 
     break; 
    case "1/32": 
    this.intSelected = value; 
     break; 
    } 
     this._moduladorService.actualizarParametros(this.intSelected); 
    }

服务

import { Injectable } from '@angular/core'; 
import { InitParam } from 'app/layout/modulador/resumen/init-param' 

@Injectable() 
export class ModuladorService extends InitParam { 

    constructor() { 
    super(); 
    this.load(); 
    } 

    obtenerParametros(){ 

     var intSelected = JSON.parse(localStorage.getItem('intSelected')); 
     return intSelected; 

    } 

    actualizarParametros(newParam : any){ 

      var intSelected = JSON.parse(localStorage.getItem('intSelected')); 

      intSelected = newParam; 

      localStorage.setItem('intSelected', JSON.stringify(intSelected)); 


    } 

}

初始化以服务

export class InitParam { 



load(){ 

     if(localStorage.getItem('intSelected')=== null){ 
      console.log('No se encontraron parametros...'); 

      var intSelected = '1/4' 

      localStorage.setItem('intSelected', JSON.stringify(intSelected)); 
     }else{ 
       console.log('Cargando parametros...'); 
     } 



    } 
}

来源

2017-07-17 Ixam Deirf

您真的不需要那里的switch语句，它什么都不做，只需保留'''intSelection（value）{this。 intSelected = value; }''' – LLL

你可以保持选定的东西在@Injectable服务，而如果不是做，肯定感觉，是独生子。

或者从/向父组件输入/输出它。

来源

2017-07-17 20:07:36 LLL

你能举个例子吗？即时通讯服务使用存储数据..但不知道如何将存储数据与下拉视图相关联。现在用完整的代码检查。 –

https://stackoverflow.com/questions/3518002/how-can-i-set-the-default-value-for-an-html-select-element – LLL

不回答我的问题.....用户是一个谁从下拉选择。他选择的选项是应该继续显示下拉菜单的选项。 –

您需要服务中的存储数据。可注入模块的服务。如果您需要保存所有应用程序中的信息 - 在提供程序中使用服务app.module.ts

来源

2017-07-17 20:10:29

是的，即时通讯。但我如何保持在下拉列表中选择的选项。现在用完整的代码检查。 –

从下拉列表中保留选定的选项

回答

相关问题