无法在同一模板中正确使用 ngIf 和 ngFor。角2答案

【问题标题】：Can't use ngIf and ngFor in same template correctly. Angular2无法在同一模板中正确使用 ngIf 和 ngFor。角2
【发布时间】：2018-03-07 13:07:49
【问题描述】：

    <ng-container *ngIf="selectedPlayer; else infoText">
      <div *ngFor="let playerEL of players">
          [playersTEST]="playerEL"
          (playerWasSelected)="onPlayerSelected(playerEL)">
      </div>

    </ng-container>

  </app-stats>

这样做的正确方法是什么？

【问题讨论】：

你的问题到底是什么？（就像一条错误消息），因为你的代码中有一些奇怪的东西
无法绑定到“playersTEST”，因为它不是“div”的已知属性。
你能通过 playerTEST 输入的指令代码吗？
您使用的是 playerTEST 指令吗？这段代码的目标是什么？
<div *ngFor="let playerEL of players"> 有错字，最后一个 > 不应该在那里。

标签： angular ngfor angular-template angular-ng-if

【解决方案1】：

代码中的小错字。您需要正确地重新格式化您的 DIV 代码，如下所示

<div *ngFor="let playerEL of players"
          [playersTEST]="playerEL"
          (playerWasSelected)="onPlayerSelected(playerEL)">
      </div>

然后按照@windmaomao 的建议实施您的 IF ELSE。

【讨论】：

【解决方案2】：

它们在 Angular2+ 中确实存在一些冲突。 Angular2 在同一个元素上不支持多个结构指令。所以你可以把它们分成两个元素。

<ng-container *ngIf="selectedPlayer else infoText">
    <div *ngFor="let playerEL of players"></div>
</ng-container>
<ng-container #infoText>
    No records.
</ng-container>

ng-container可以避免创建额外的div，否则可以使用ng-template。

【讨论】：

他在一个元素上没有多个结构指令。
你说得对，我没有直接回答他的回答。但我有点知道他要去哪里:)
他只是在向players"> 的冗余> 前进；-)
是的，没错，我现在明白了，这可能太多了。

【解决方案3】：

您的指令似乎没有被实例化或识别。检查指令选择器，或者是否将其添加到模块中，或者是否将指令的模块添加到组件模块中。

【讨论】：