從下拉列表中保留選定的選項

我有不同選項的下拉列表。我希望將選定的選項保留在下拉列表的頂部，直到用戶更改它。現在，如果我選擇任何選項，我走出去的組件，然後再回來，下拉與第一值重置....從下拉列表中保留選定的選項

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

是的，即時通訊。但我如何保持在下拉列表中選擇的選項。現在用完整的代碼檢查。 –

從下拉列表中保留選定的選項

回答

相關問題