2016-12-06 8 views
0

ルートがアクティブでない場合、imgを非表示にしようとしています。私が試してみました:Angular2 ngIfが機能しない

<div class="sidebar-nav-item dashboard-item" routerLinkActive="active" #rlaDashboardW="routerLinkActive"> 
     <a routerLink="/core/dashboard"> 
      <span class="helper"></span> 
      <div class="re-full-height icon"> 
      <img class="nav-icon" src="{{ rlaDashboardW.isActive ? './assets/navigation/dashboard-icon-active.svg' : './assets/navigation/dashboard-icon.svg'}}" 
      /> 
      </div> 
      <div class="re-full-height"> 
      <span> Dashboard </span> 
      </div> 
     </a> 
     <div class="separator-container"> 
      <img *ngIf="{{rlaDashboardW.isActive}}" src="./assets/navigation/navigation-separator-wide-active.svg" /> 
      <img src="./assets/navigation/navigation-separator-wide.svg" /> 
     </div> 
     </div> 

が、このエラーを行く:http://pastebin.com/TPXZU3BD

を私がしようとした場合:

<div class="sidebar-nav-item dashboard-item" routerLinkActive="active" #rlaDashboardW="routerLinkActive"> 
     <a routerLink="/core/dashboard"> 
      <span class="helper"></span> 
      <div class="re-full-height icon"> 
      <img class="nav-icon" src="{{ rlaDashboardW.isActive ? './assets/navigation/dashboard-icon-active.svg' : './assets/navigation/dashboard-icon.svg'}}" 
      /> 
      </div> 
      <div class="re-full-height"> 
      <span> Dashboard </span> 
      </div> 
     </a> 
     <div class="separator-container"> 
      <img *ngIf="rlaDashboardW.isActive" src="./assets/navigation/navigation-separator-wide-active.svg" /> 
      <img src="./assets/navigation/navigation-separator-wide.svg" /> 
     </div> 
     </div> 

私はエラーを取得:http://pastebin.com/wsGLqNx4

注:2つのスニペットとの違いは、最初のものでは補間を使用し、2番目のものではテンプレート変数に直接バインドします。

注2:私はngClassと同様の問題が発生していますので、私は、これは世界的な問題であると考えている - あなたはapp.module.tsで、あなたにFormsModuleインポートしないとき

答えて

0

を調査し、更新します。このエラーが発生しています現在のモジュール。動作させるには、両方でインポートするようにしてください。

また、お送りいただいたエラーメッセージは、お送りいただいたコードとは関係ありません。次回に良い助けをしたい場合は、

+0

私はFormsModuleをApp.Moduleと、SharedModuleをエクスポートとしてインポートしています(SharedModuleはこのテンプレートがあるCoreModuleにインポートされています)またCore.Moduleを別のインポートとして...また、これらのエラーは、2つのスニペットを実行したときに得られるものです...スニペットを削除するとエラーが発生しません=>エラーは関連していますコード:) – mp3por

+0

ngIf/ngClass式でバインディング変数を使用すると問題が発生すると思います(ngClassに似た問題があります) – mp3por

+0

まず、変数をextrapolteする必要はありませんので、* ngIf = 'yourVar'です。次に、TypeError:undefinedの 'toUpperCase'プロパティは実際にあなたの現在のコードに関係していません。 – Sakuto

関連する問題