Zeigen Sie zwei verschiedene Schaltflächen auf einer Seite basierend auf den Objekten in einer JSON-Antwort an.

Question

In meiner eckigen App habe ich ein Array namens "cart", das leer sein kann oder einige Objekte hat. Ich versuche, die Schaltfläche Refer auf meiner Seite anzuzeigen immer wenn das Array leer ist. Wenn das Array Objekte hat, sollte es trotzdem die Buy-Schaltfläche anzeigen. In meinem Fall, wenn das Array nicht leer ist, kann es maximal zwei Objekte haben - Now and Later oder jedes basierend auf den Szenarien .

Ich versuche so etwas, aber in beiden Fällen wird die Verweistaste angezeigt.

Mein html-

<div class="col-md-12"> 
    <button *ngIf="clickToRefer">Buy</button>  
    <button *ngIf="!clickToRefer">Refer</button>  
</div> 

In meinem .ts

datei

if (data) { 
    for (var i = 0; i < data.result.cart.length; i++) { 
     var obj = data.result.cart[i]; 
     if ((obj !== undefined) && 
      (data.result.cart.length > 0) && 
      ((obj.option == 'Now') || (obj.option == 'Later'))) { 
      this.clickToRefer = true; 
     } else { 
      this.clickToRefer = false; 
     } 
    }   
    this.router.navigate(['/home']); 
} 

innerhalb Export ich habe declared-

clickToRefer : boolean; 

Hier werden Daten die gesamte Antwort hat, die Warenkorb hat Array.Ich bekomme die Antwort richtig.

Kann mir jemand helfen zu wissen, wo ich falsch liege?

Answer 1

Ich denke, es ist nur ein JS-Problem, nicht eckig.

Innerhalb der for-Schleife „obj“ kann nicht undefiniert sein und die Länge des Feldes wird immer> 0, so der Code Ihrer Probe die gleiche ist, wie:

if (data) { 
    for (var i = 0; i < data.result.cart.length; i++) { 
     var obj = data.result.cart[i]; 
     if ((obj.option == 'Now') || (obj.option == 'Later')) { 
      this.clickToRefer = true; 
     } else { 
      this.clickToRefer = false; 
     } 
    }   
    this.router.navigate(['/home']); 
} 

ich, dass Ihre Daten vermuten .option ist niemals "Jetzt" oder "Später"?