使用* ngIf绑定布尔值 [英] Binding a boolean value using *ngIf

问题描述

component.ts :

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

component.html :

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

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

I expect to see the true when I press the button that calls changeFlag() but in my console is always like this:

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

这不是真的.每当我按下按钮进行更改时，如何绑定该布尔值?

This doesn't become true. How can I bind this boolean every time I press the button to change it?

推荐答案

根据您的示例进行检查: StackBlitz

Check this out according to your example: StackBlitz

这是相同的代码，以防万一StackBlitz再次发生错误.

Here is the same code, posted here in case of something happens again to the 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;
}

这篇关于使用* ngIf绑定布尔值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！