Question

component.ts ：

public myFlag: boolean = false;
changeFlag(){
  this.myFlag = true;
}

component.html ：

<ng-template *ngIf="newPOST">{{newPOST}}</ng-template>

当我按下调用changeFlag()的按钮时，我希望看到 true ，但在我的控制台中总是这样：

<!--bindings={
  "ng-reflect-ng-if": "false"
}-->

这不会成为现实。每次按下按钮进行更改时，如何绑定此布尔值？

Answer 1

*ngIf不适用于<ng-template>，因为它是Structural Directives。您可以找到更多详细信息here

作为一种解决方法，您可以使用*ngIf else来实现它

<div *ngIf="!myFlag;else myFlagTrue;">
</div>
<ng-template #myFlagTrue>{{myFlag}}</ng-template>

以下是工作 example

Answer 2

根据您关于公共汽车和汽车的示例进行检查：https://stackblitz.com/edit/angular-tyqgkx

Answer 3

您可以单独使用myFlag变量

<ng-template *ngIf="myFlag">{{newPOST}}</ng-template>

Answer 4

*ngIf没有使用<ng-template>。

使用<ng-container>进行*ngIf - 检查而不是div。如果您使用的是div，那么如果div为假，则模板中会显示空myFlag。

例如：

<ng-container *ngIf="myFlag; else myFlagFalse;">
  {{newPOST}}
</ng-container>
<ng-template #myFlagFalse>
  // something, if myFlag is false
</ng-template>

使用* ngIf绑定布尔值

4 个答案: