我尝试在 Angular 2 中保留 Localstorage 中选定的下拉值

Question

如何在移动到另一个页面并返回下拉列表页面后绑定每个下拉列表的选定下拉值，该值应保留。

我使用了 ngModel，它为所有下拉列表绑定了一个值。

但是，我需要像从用户那里选择的那个值一样，该值应该为那个特定的下拉列表保留。

我尝试在Angular2中使用[selected]。但是，我不知道它是如何工作的。谁能解释一下..

Answer 1

如果您想为下拉列表保留 selected 用户值而不保存到数据库。您唯一需要做的就是使用

在 localStorage 中存储 selected 值

localstorage.setItem('dropdownSelectedItem','value1') 在 select 元素的更改事件侦听器上。

并且在页面刷新时，您需要检查 localStorage 键 'dropdownSelectedItem' 是否被 select 编辑。

如果设置了，则 defaultValue 参数将使用 localstorage 键值设置，否则您必须第一次在代码中设置一些默认值。

唯一的事情是将 defaultValue 变量设置为 localstorage 值（如果已设置）。

Answer 2

我使用此行从本地存储中获取值 var dropLocalValues = JSON.parse(localStorage.getItem('localvaluekey'));

然后我建立一些逻辑。

 var dropLocalValues = JSON.parse(localStorage.getItem('localvaluekey'));

          var tempDropAssignValues = [];

          if(dropLocalValues.length != 0)
          {
            for(var h=0;h<dropLocalValues.length;h++)
            {
              if(dropLocalValues[h].itemSeqID == this.getOneItem.seq_no)
              {
                for(var c=0;c<dropLocalValues[h].selectedAnswer.length;c++)
                {
                  tempDropAssignValues.push(dropLocalValues[h].selectedAnswer[c]);
                }
              }
            }
          }

          if(tempDropAssignValues.length != 0)
          {
            console.log(tempDropAssignValues);
            for(var d=0;d<=tempDropAssignValues.length;d++)
            {
              for(var u=0;u<this.getOneItem.item.length;u++)
              {
                if(this.getOneItem.item[u].data_format_id == 9)
                {
                  if(this.getOneItem.item[u].data_format_value[d].match_data[1].header == null || this.getOneItem.item[u].data_format_value[d].match_data[1].header == 0)
                  {
                    this.getOneItem.item[u].data_format_value[d].match_data[1].match_value = tempDropAssignValues[d-1].match_value;
                    this.getOneItem.item[u].data_format_value[d].match_data[1].seq_id = tempDropAssignValues[d-1].seq_id;
                    break;
                  }
                }
              }
            }
          }

我尝试在 Angular 2 中保留 Localstorage 中选定的下拉值

I try to retain the selected drop down values from the Localstorage in Angular 2

html

typescript

angular2-directives