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

【问题标题】：Retaining selected option from dropdown从下拉列表中保留选定的选项
【发布时间】：2017-07-17 20:03:05
【问题描述】：

我有一个包含不同选项的下拉菜单。我想将所选选项保留在下拉列表的顶部，直到用户更改它。现在，如果我选择任何选项并退出组件然后返回，下拉菜单将重置为第一个值....

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


   }

}

iNIT 服务

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



    }
}

【问题讨论】：

你真的不需要那个 switch 语句，它什么都不做，留下intSelection(value){ this.intSelected = value; }

标签： html angular

【解决方案1】：

您可以将选定的内容保存在 @Injectable 服务中，如果不将其设置为，绝对感觉就像是一个单例。

或者从/到父组件输入/输出。

【讨论】：

你能举个例子吗？我使用服务来存储数据..但不知道如何将存储的数据与下拉视图相关联。立即查看完整代码。
stackoverflow.com/questions/3518002/…
不回答我的问题.....用户是从下拉列表中选择的人。并且他选择的选项应该继续在顶部显示下拉菜单。
这对我有用
另外，不要对模板中的选择进行硬编码，创建一个数组 options = [ 'a', 'b', 'c'] 然后使用 ngFor 迭代它们，就像这里的示例一样 - johnpapa.net/angular-2-ngfor

【解决方案2】：

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

【讨论】：

是的，我正在这样做。但我如何保持在下拉列表中选择的选项。立即查看完整代码。