html - Angular 2 : Give value to button based on dropdown menu value

Question

我是 Angular 2 的新手。

我有一个按钮和一个出现的下拉菜单。当我单击任何选项时，应将其值提供给按钮。

.common_select_box {
	width: 100%;
}

.common_select_box button {
	border: thin #cfdadd solid;
	border-radius: 0 !important;
	width: 100%;
	text-align: left;
	padding: 7.45px 12px;
	border-radius: 1.5px !important;
}

.common_select_box button .caret {
	display: inline-block;
	width: 0;
	height: 0;
	margin-right: 2px;
	vertical-align: middle;
	border-top: 6px dashed;
	border-right: 6px solid transparent;
	border-left: 6px solid transparent;
	position: absolute;
	top: 14px;
	right: 5px;
}

.common_select_box ul.dropdown-menu {
	border: 1px solid #cfdadd;
	border-radius: 2px;
	box-shadow: none !important;
	width: 100%;
	padding: 0px;
}

.common_select_box ul.dropdown-menu li {
	padding: 5px 15px;
	font-size: 12px;
  list-style-type:none;
}

.common_select_box ul.dropdown-menu li:hover {
	background: #edf1f2 !important;
}

<div class="common_select_box">
                        <!--give open class to below div when clicking on button-->
                        <div class="input-group-btn dropdown {{dropdown1? 'open':''}}" (click)="dropdown1=!dropdown1">
                          <button type="button" class="btn btn-default font_size_12 no_box_shadow ticket_info_subline_text_color" dropdown-toggle="" aria-haspopup="true" aria-expanded="false" >Select &nbsp; &nbsp;<span class="caret" style="color: #bfbfbf;"></span></button>
                          <ul class="dropdown-menu">
                              <li >Option 1</li>
                              <li >Option 2</li>
                              <li >Option 3</li>
                              
                            </ul>
                        </div><!-- /btn-group -->
                    </div>

当我点击选项 1 时。那么它的值应该被赋予button标签。

任何帮助都会很棒。

谢谢。

Answer 1

这会起作用，

<div class="common_select_box">
<div class="input-group-btn dropdown {{dropdown1? 'open':''}}" 
(click)="dropdown1=!dropdown1">
    <button type="button" class="btn btn-default font_size_12 no_box_shadow 
ticket_info_subline_text_color" dropdown-toggle=""
        aria-haspopup="true" aria-expanded="false">{{selectedNav}}<span 
class="caret" style="color: #bfbfbf;"></span> </button>
<ul class="dropdown-menu">
 <li (click)="setNav(item)" *ngFor="let item of navs">{{item}}</li>
  </ul>

在 .ts 文件中

export class PropertyComponent {
selectedNav: any; navs = ['option 1', 'option 2', 'option 3']
ngOnInit() {
    this.selectedNav = 'select value';
}
setNav(nav){
    this.selectedNav = nav;
}
}