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

Question

我有一个定义为boolean类型的变量，我有一个函数，它可以在单击按钮时将值从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'的计算值

    <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