javascript - *ngIf Angular doğru değerleri bağlamıyor

ngOnInit() içinde aşağıdaki kodu kullanıyorum, HTML'de bazı içerikleri bağlamak için kullanmak istiyorum ve nedense sorunu tespit edemiyorum ve web sayfasında hiçbir şey yazdırmıyor! Birisi rehberlik edebilir veya yardımcı olabilir mi, lütfen?

TypeScript :

public ngOnInit() { 

    let one = true;
    let two = false;
    let three = true;
    let four = true;

    let caseA = one && two && three && four;
    let caseB = one && !two && three && four; // should be true
    let caseC = one && two && !three && !four;
    let caseD = one && two && three && !four;
    let caseE = one && !two && !three && !four;
    
    console.log("cases: ", caseA, caseB, caseC, caseD, caseE);

}

HTML :

<p class="msg" *ngIf="caseA">{{ valueA }}</p>
<p class="msg" *ngIf="caseB">{{ valueB }}</p>
<p class="msg" *ngIf="caseC">{{ valueC }}</p>
<p class="msg" *ngIf="caseD">{{ valueD }}</p>
<p class="msg" *ngIf="caseE">{{ valueE }}</p>

Teşekkür ederim

Cevap #1

Bence doğru yerde deklarasyon yapmamışsınız. Değişkenleri bileşeninizde aşağıdaki gibi public olarak deklar etmeyi deneyin:

export class YourComponent implements OnInit {
    public caseA: boolean;
    public caseB: boolean;
    public caseC: boolean;
    public caseD: boolean;
    public caseE: boolean;

  ngOnInit(): void {
    const one = true;
    const two = false;
    const three = true;
    const four = true;

    this.caseA = one && two && three && four;
    this.caseB = one && !two && three && four; // should be true
    this.caseC = one && two && !three && !four;
    this.caseD = one && two && three && !four;
    this.caseE = one && !two && !three && !four;

    console.log("cases: ", this.caseA, this.caseB, this.caseC, this.caseD, this.caseE);
  }

Cevap #2

Şablonun bu değişkenlere erişebilmesi için .ts dosyanızda genel değişkenleri bildirmelisiniz

export class AppComponent implements OnInit{

 public caseA = true

  public ngOnInit() {

    let one = true;
    let two = false;
    let three = true;
    let four = true;

    let caseA = false // have no impact at ngIf in template
    let caseB = one && !two && three && four; // should be true
    let caseC = one && two && !three && !four;
    let caseD = one && two && three && !four;
    let caseE = one && !two && !three && !four;

    console.log("cases: ", caseA, caseB, caseC, caseD, caseE);

}

html

<p class="msg" *ngIf="caseA">Hey there</p>