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'，两者都为真。您应该将属性名称括在方括号中，然后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