angular *ngIf 没有按预期工作 html 标签在值更改后不会重新显示

Question

我有一个定义为布尔类型的变量，我有一个函数，单击按钮即可将值从 true 更改为 false。当值改变时，应在 html 中进行更改。

问题是在从真到假的转变中有一次变化。但是，当您再次单击并且值更改为 true 时，html

中没有任何反应

这是我的html代码谁负责更改值

<mat-radio-group >
  <mat-radio-button (change)='itIsRoundtrip($event.value)' class="example-margin" checked value="true">Roundtrip</mat-radio-button>
  <mat-radio-button (change)='itIsRoundtrip($event.value)' class="example-margin" value="false">One way</mat-radio-button>
</mat-radio-group>

这是应该更改的部分

<mat-form-field *ngIf='Roundtrip == true' appearance="outline">
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

这是改变值的函数

  Roundtrip: boolean = true;

  itIsRoundtrip(Roundtrip:boolean){
    this.Roundtrip = Roundtrip
    console.log(this.Roundtrip)
  }

您认为后台发生了什么并阻止了html重新显示标签？

Answer 1

Roundtrip的值实际上是一个字符串，'true'或者'false'，都是true。您应该将属性名称括在方括号中，然后 angular 将其绑定到 'true':

的评估值

    <mat-radio-group >
      <mat-radio-button (change)='itIsRoundtrip($event.value)' class="example-margin" [value]="true">Roundtrip</mat-radio-button>
      <mat-radio-button (change)='itIsRoundtrip($event.value)' class="example-margin" [value]="false">One way</mat-radio-button>
    </mat-radio-group>                                                             // ^^^^^^^

StackBlitz

angular *ngIf 没有按预期工作 html 标签在值更改后不会重新显示

angular *ngIf not work as expected html tag not re-display after the value change

html

angular

typescript

angular-ng-if