使用 *ngIf 绑定布尔值答案

【问题标题】：Binding a boolean value using *ngIf使用 *ngIf 绑定布尔值
【发布时间】：2017-12-28 11:25:52
【问题描述】：

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"
}-->

这不是真的。每次按下按钮更改它时如何绑定这个布尔值？

【问题讨论】：

你在哪里打电话changeFlag??
我想在用户使用切换 (true,false) 时加载特定的 html，但我认为布尔值永远不会改变，它总是错误的。
@SaurabhAgrawal 我在同一个组件中调用changeFlag

标签： angular

【解决方案1】：

*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>

【讨论】：

【解决方案2】：

根据你的例子检查一下：StackBlitz

这是相同的代码，张贴在这里，以防 StackBlitz 再次发生问题。

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  myFlag = false;
}

<button (click)="myFlag = !myFlag">Toggle</button>
<div *ngIf="myFlag" style="color:green">Hey I'm true</div>
<div *ngIf="!myFlag" style="color:red">Hey I'm false</div>

p {
  font-family: Lato;
}

【讨论】：

考虑将堆栈闪电战的相关部分移动到您的答案中。仅链接的答案往往不会吸引很多赞成票，并且如果链接消失，也可能会过时。
请更正链接中的示例，或者更好的是，将代码放入您的答案中。
@informaticienzero 有人改变了我的例子，基于这个问题，我相信主要思想是使用布尔值在两个 div 之间切换。我更新了示例谢谢。

【解决方案3】：

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

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

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

这是工作 example

【讨论】：

这是一个很好的例子，但它不能按我的意愿工作，我的问题是我在car.component 中按下提交按钮changeFlag(flag)，然后我发送标志（这是真的) 将其添加到 bus.component 中的其他函数中，例如在 bus.component 中我写了 this.myFlag = flag 在我的控制台中一切正常，但在我的 html 页面中仍然是错误的。

【解决方案4】：

您可以单独使用myFlag 变量

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

【讨论】：

它不起作用。这是我的控制台：
没有变化，没有结果，就在我的控制台中我得到了： –
@Aravind 检查我的答案，使用那个 stackblitz 链接并在那里使用<ng-template *ngIf="myFlag">{{newPOST}}</ng-template>