【问题标题】:Angular 2 : Show div based on dropdown valueAngular 2:根据下拉值显示 div
【发布时间】:2017-04-23 15:26:36
【问题描述】:

我有一个下拉菜单,根据值的选择,应该显示相应的 div。

我已经尝试了以下代码。但它不起作用。

export class PropertyComponent {
regTypeSelectedOption: string = "";
selectedNav: any; navs = ['option 1', 'option 2', 'option 3']

ngOnInit() {
    this.selectedNav = 'select value';
}
setNav(nav:any){
        this.selectedNav = nav;
            if(this.selectedNav == "option 1"){
                this.regTypeSelectedOption = "option 1";
            }
            else if(this.selectedNav == "option 2"){
                this.regTypeSelectedOption = "option 2";
            }
            else if(this.selectedNav == "option 3"){
                this.regTypeSelectedOption = "option 3";
            }
        }

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2.js"></script>
<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>

  <div *ngIf="regTypeSelectedOption == 'option 1'">
  option 1 
  </div>

  <div *ngIf="regTypeSelectedOption == 'option 2'">
  option 2 
  </div>

  <div *ngIf="regTypeSelectedOption == 'option 1'">
  option 3 
  </div>

任何帮助都会很棒。

谢谢。

【问题讨论】:

  • 为什么在使用 Angular 2 时导入 AngularJS 1.2.3?
  • 您遇到的错误是什么?
  • 没有错误。
  • 那是什么问题?
  • 当我运行时,我没有得到要显示的 div。

标签: html angular


【解决方案1】:

使用===

  <div *ngIf="regTypeSelectedOption === 'option 1'">
  option 1 
  </div>

DEMO

【讨论】:

猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多