Angular2 ngIf 不起作用答案

【问题标题】：Angular2 ngIf does not workAngular2 ngIf 不起作用
【发布时间】：2017-04-20 22:22:03
【问题描述】：

如果路线未激活，我会尝试隐藏 img。我试过了：

<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

注意：两个 sn-ps 之间的区别在于，在第一个中我使用插值，而在第二个中我直接绑定到模板变量。

注意 2：我在使用 ngClass 时遇到了类似的问题，所以我认为这是一个全球性问题 - 将进行调查和更新

【问题讨论】：

标签： angular angular-ng-if

【解决方案1】：

当您没有在 app.module.ts 和当前模块中导入 FormsModule 时，会发生此错误。请务必在两者中都导入它以使其正常工作。

此外，您发送给我们的错误消息与您提供给我们的代码无关。如果您下次需要好的帮助，请尝试为我们提供好的部分；-)

【讨论】：

我在 App.Module 中导入了 FormsModule，在 SharedModule 中作为导出导入（ SharedModule 在此模板所在的 CoreModule 中导入），在 Core.Module 中作为单独导入导入。 .. 这些错误也是我在运行两个 sn-ps 时得到的......如果我删除 sn-ps 我没有得到错误 => 错误与代码有关:)
我认为在 ngIf/ngClass 表达式中使用绑定变量有问题（我在 ngClass 也有类似的问题）
首先，你不需要推断变量，所以 *ngIf='yourVar'。然后，TypeError: Cannot read property 'toUpperCase' of undefined 与您当前的代码没有真正的关系。
查看代码的第二个 sn-p ...我在其中使用 *ngIf="rlaDashboardW.isActive" ...所以我尝试不进行插值，但仍然出现错误。 undefined 的“toUpperCase”可能是当 Angular 尝试用我的插值做某事时，这显然是行不通的。正如我所说，在这两种情况下删除 ngIf 指令都会导致干净的执行没有错误:)
我在使用 ngClass 和模板变量时也遇到了同样的问题，所以我现在很确定在指令表达式中使用模板变量时会出现问题