Angular2 *ngIf 无法正常工作答案

【问题标题】：Angular2 *ngIf does not work correctlyAngular2 *ngIf 无法正常工作
【发布时间】：2017-10-06 13:13:59
【问题描述】：

在我使用 *ngIf 的代码中，它在任何时候都应该只显示两者之一。但问题是它只显示第二个，即使第二个不应该在某些时候显示。我使用 for 循环显示所有元素，但正如您在图片中看到的那样，即使第二个的值为 -1，也只显示第二个。感谢您的帮助！

代码：

<ng-template let-internship="rowData" pTemplate="body" *ngIf="favorite?.FavoritesIds.indexOf(internship?.InternshipId) === -1;"><!--TODO BRIAN ngif-->
  <a class="btn btn-default" [routerLink]="['/student/stageopdrachten', internship.InternshipId, false]"><!--Not shown TODO-->
    <i class="glyphicon"></i>Meer
  </a>
</ng-template>
<ng-template let-internship="rowData" pTemplate="body" *ngIf="favorite?.FavoritesIds.indexOf(internship?.InternshipId) !== -1;"><!--TODO BRIAN ngif-->
  <a class="btn btn-default" [routerLink]="['/student/stageopdrachten', internship.InternshipId, true]"><!--always shown-->
    <i class="glyphicon"></i>Meer{{favorite?.FavoritesIds.indexOf(internship?.InternshipId)}}
  </a>
</ng-template>

图片：

【问题讨论】：

Plunker 会很有帮助
可能是类型大小写，您应该将 === 和 !== 替换为 == 和 != ？
将其更改为 == 和 != 可悲的是@mankers 没有做任何事情
我很乐意，但我以前从未使用过 plunker，但你可以看到变量。 FavoritesIds 是一个数字数组。@yurzui

标签： html angular loops if-statement angular-ng-if

【解决方案1】：

做一个 {{favorite?.FavoritesIds.indexOf(internship?.InternshipId) | json}} 查看变量中的内容

我的建议是将 if 语句放在单独的函数中。

有可能 === 测试字符串，而它是一个数字。

【讨论】：

ngIf 应该适用于数字，我在这里问之前搜索了它

【解决方案2】：

使用div 代替 ng-template。您不能将语法糖 * 与 ng-template 一起使用。

Structural Directives

星号是“语法糖”，表示更多内容复杂的。在内部，Angular 分两个阶段对其进行脱糖。首先，它将 *ngIf="..." 转换为模板属性 template="ngIf ...”，就像这样。

<div template="ngIf hero">{{hero.name}}</div>

然后它将模板属性转换为元素，包裹在宿主元素周围，像这样。

<ng-template [ngIf]="hero">
  <div>{{hero.name}}</div>
</ng-template>

【讨论】：

你也可以用<ng-container>代替<ng-template>，那么你可以使用更方便的*ngFor语法。
@GünterZöchbauer 您能否提供有关“为什么”它无法正常工作的任何其他信息？
<div *ngIf="..."></div> 与 <ng-template [ngIf]="..."><div></div></ng-template> 相同。因此，如果您使用 *xxx 语法，则会隐式创建 <ng-template> 元素。使用<ng-template *ngIf="...">，您将创建一个<ng-template [ngIf]="..."><ng-template></ng-template></ng-template>，并且不会显示任何内容，因为内部模板永远不会被标记到DOM。这就是你所说的“它”吗？
是的，这就是我的意思，但是为什么内部模板永远不会包含在 DOM 中？当然，如果<ng-template *ngIf="..."> 的条件为真，那么嵌套多少层 ng-template 都无关紧要。例如，这仍然会显示，不是吗？ <ng-template><ng-template>hello</ng-template></ng-template ng-template 的性质我有什么遗漏吗？
A <ng-template> 本身不显示任何内容，它只是一个容器。当 NgIf 表达式变为真时，带有 <ng-template [ngIf]="..."><ng-template>xxx</ng-template></ng-template> 的 NgIf 指令将创建一个 <ng-template></ng-template>，但 Angular 实际上并没有将 <ng-template> 添加到 DOM（它仅在 JavaScript 内部处理它）。因此，其他一些组件或指令需要获取此 <ng-template> 并将 xxx 标记到 DOM，但没有，因为 NgIf 只关心它应用到的 <ng-template>。

【解决方案3】：

更新

就像@Daniel Cooke 所说，我应该使用 div，因为 ng 模板在彼此相邻时效果不佳。而是使用 div 并且只有一个 ng 模板做到了。所以工作代码：

<ng-template let-internship="rowData" pTemplate="body" ><!--TODO BRIAN ngif -->
          <div *ngIf="favorite?.FavoritesIds.indexOf(internship?.InternshipId) === -1">
            <a class="btn btn-default" [routerLink]="['/student/stageopdrachten', internship.InternshipId, false]"><!--niet bestaat TODO-->
              <i class="glyphicon"></i>Meer
            </a>
          </div>
          <div *ngIf="favorite?.FavoritesIds.indexOf(internship?.InternshipId) != -1;">
            <a class="btn btn-default" [routerLink]="['/student/stageopdrachten', internship.InternshipId, true]"><!--wel bestaat-->
              <i class="glyphicon"></i>Meer{{favorite?.FavoritesIds.indexOf(internship?.InternshipId)}}
            </a>
          </div>
        </ng-template>

【讨论】：

使用<ng-container>而不是<ng-template>，那么你可以使用更方便的*ngFor语法
感谢您的建议，以后会改用它@GünterZöchbauer