Угловая привязка нг-если

Question

Я не могу выполнить привязку должным образом, она должна переключаться при нажатии.ng-refle-ng-if становится истинным и остается верным, снова при щелчке оно должно быть ложным, я пробовал (clickoutside) также, но не повезло.Следовал за этим вопросом также из stackoverflow Привязка логического значения с использованием * 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
       }
      }

HTML-код

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

Answer 1

Вам, вероятно, не нужны две переменные для того, что вы пытаетесь сделать.Вот как вы можете сделать это, если вы должны использовать обе эти переменные.

<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

Answer 2

Попробуйте это

Код TS

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

Код HTML

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