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インポートしないとき
私はFormsModuleをApp.Moduleと、SharedModuleをエクスポートとしてインポートしています(SharedModuleはこのテンプレートがあるCoreModuleにインポートされています)またCore.Moduleを別のインポートとして...また、これらのエラーは、2つのスニペットを実行したときに得られるものです...スニペットを削除するとエラーが発生しません=>エラーは関連していますコード:) – mp3por
ngIf/ngClass式でバインディング変数を使用すると問題が発生すると思います(ngClassに似た問題があります) – mp3por
まず、変数をextrapolteする必要はありませんので、* ngIf = 'yourVar'です。次に、TypeError:undefinedの 'toUpperCase'プロパティは実際にあなたの現在のコードに関係していません。 – Sakuto