Angular binding ng-if

Question

我无法正确绑定，它应该在单击时切换。 ng-reflect-ng-if 变为真并且它仍然是真的，再次单击它应该是假的，我也尝试过(点击外部(但没有运气。跟随这个问题也来自堆栈溢出 使用 *ngIf 绑定布尔值

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

---

TS 代码

showAdditionalGraceInfo: boolean = false;
showAdditionalGraceInfo: boolean = false;
toggleAdditionalGraceInfo() {
this.showAdditionalGraceInfo = !this.showAdditionalGraceInfo;
if(this.showAdditionalGraceInfo === true){
this.showAdditionalGraceInfoWrapper = true;
} else{
this.showAdditionalGraceInfoWrapper = false
}
}

网页代码

<span (click)="toggleAdditionalGraceInfo()">
<span *ngIf="showAdditionalGraceInfoWrapper">
{{graceDaysAdditionalInfo}}
</span>
</span>

Answer 1

试试这个

代码 TS

toggleAdditionalGraceInfo() {
if(!this.showAdditionalGraceInfo){
this.showAdditionalGraceInfoWrapper = true;
} else{
this.showAdditionalGraceInfoWrapper = false
}
}

代码网页

<span (click)="toggleAdditionalGraceInfo()">
<ng-container *ngIf="showAdditionalGraceInfoWrapper">
<span>{{graceDaysAdditionalInfo}}</span>
</ng-container>
</span>

Answer 2

您可能不需要两个变量来执行要执行的操作。如果必须同时使用这两个变量，则可以这样做。

<span id="test" (click)="showAdditionalGraceInfoWrapper = showAdditonalGraceInfo = 
!showAdditionalGraceInfoWrapper">
<span *ngIf="showAdditionalGraceInfoWrapper">
{{graceDaysAdditionalInfo}}
</span>
</span>

showAdditionalGraceInfoWrapper:boolean = true;
showAdditonalGraceInfo:boolean = true;
graceDaysAdditionalInfo: string = "test"

示例：https://stackblitz.com/edit/angular-vlfmur