Question

我有一个按钮下拉列表

<div class="form-group">
            <button type="button" class="btn btn-secondary dropdown-toggle form-group" (click)="get()" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            <span id="selected">View Domains</span>
            </button>
            <div class="dropdown-menu arrow form-group">
              <button class="dropdown-item" type="button" value="1">1</button>
              <button class="dropdown-item" type="button" value="2">2</button>
              <button class="dropdown-item" type="button" value="3">3</button>
            </div>
    </div>



 $('.dropdown-menu button').click(function(){
      $('#selected').text($(this).text());
    });

我希望在选择任何选项（1,2,3）时获取组件中的下拉值，例如：如果他们选择1，我应该能够在组件中获得值= 1，并保存它到localStorage。

Answer 1

在click上使用<div class="dropdown-menu arrow form-group">事件，更新HTML，如下所示。

<div class="dropdown-menu arrow form-group" (click)="onSelect($event)">

然后在组件中添加onSelect方法，如下所示。

onSelect(event) { localStorage.setItem("selectedItem", event.target.value); // Do the rest }

Answer 2

你的ts文件中的

myText = 'View Domains'

select(val){
    this.myText = val;
    localStorage.setItem('myText', this.myText);
}

模板中的

<div class="form-group">
    <button type="button" class="btn btn-secondary dropdown-toggle form-group" (click)="get()" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span id="selected">{{myText}}</span>
    </button>
    <div class="dropdown-menu arrow form-group">
        <button class="dropdown-item" type="button" value="1" (click)="select(1)">1</button>
        <button class="dropdown-item" type="button" value="2" (click)="select(2)">2</button>
        <button class="dropdown-item" type="button" value="3" (click)="select(3)">3</button>
    </div>
</div>

如何从按钮下拉列表获取价值并将其保存在localStorage中？ Angular 4

2 个答案: