2017-04-23 12 views
2

ドロップダウンメニューがあり、値の選択に基づいて、それぞれのdivが表示されます。角2:ドロップダウン値に基づいて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> 

すべてのヘルプは素晴らしいことです。

ありがとうございます。あなたは角度2を使用しているときに、AngularJS 1.2.3をインポートしなかったのはなぜ

+0

? –

+0

取得しているエラーは何ですか? –

+0

エラーは発生しません。 –

答えて

1

使用===

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

DEMO

+0

あなたの助けてくれてありがとうございましたが、うまくいきませんでした:( –

+0

@Rishiデモを確認してくださいhttps://plnkr.co/edit/PHQ8lBGV6jzYUQLAcxzg?p=preview – Sajeetharan

関連する問題