Es ist möglich, nach ngIf zu handeln?

Question

ich habe eine ngIf verschachtelt in zwei ngFor's, um eine ion-list zu machen, aber ich möchte keine duplocated ion-list, gibt es eine möglichkeit, wenn der ngIf korrekt ist dann ändert es einen variablen wert wie Show = false, also macht er keine lonelisten? Dank

hier ist der Code, der mit *** ist die, die ich mag das würde, wenn sie es ändert sich der zweite Wert erforderlich hall.show auf True feuert, so dass es wiederholt sich nicht

<ion-content padding> 
    <template ngFor let-item [ngForOf]="listaRdy"> 
     <template ngFor let-hall [ngForOf]="pasillosObj"> 
     ***<ion-list *ngIf="item.pasillo==hall.value && hall.show ==false"> 
      <ion-list-header>{{hall.name}}</ion-list-header> 
      <template ngFor let-articulo [ngForOf]="listaRdy"> 
      <ion-item *ngIf="articulo.pasillo==hall.value">{{articulo.name}}</ion-item> 
      </template> 
     </ion-list> 
     </template> 
    </template> 
</ion-content> 

Answer 1

Sie können eine Javascript-Funktion in Ihrer ng-if-Anweisung verwenden, wie zum Beispiel:

$scope.myNgIf=function(params){//Show=false or whatever; //return true of false;} 

und dann in Ihrem HTML <div ... ng-if="myNgIf()">my content</div>

Answer 2

wie über Sie eine Funktion aus der Vorlage nennen? Ich würde versuchen, diese:

***<ion-list *ngIf="item.pasillo==hall.value && hall.show ==false"> 
{{setToTrue(hall.show)}} 
... 

Und dann in Ihrer .ts Datei:

setToTrue(variable){ 
     variable = true; 
    } 

Answer 3

Es ist wichtig zu erkennen, dass mit kantigem Ihrer Vorlage nur nicht einmal gemacht, wird es wieder machen, wann immer jedes der Ausdrücke ändern sich.

Das heißt, wenn Sie ändern hall.show als Nebeneffekt des Renderns wird die Vorlage Angular sofort rendern es wieder und wieder und wieder, bis es entweder aufhört zu ändern oder bis Angular gibt auf und Sie erhalten einen Fehler in der Konsole eingeloggt.

Das bedeutet, dass es keine Möglichkeit gibt, das zu tun, was Sie erreichen möchten. Sie können den Status eines Elements nicht aktualisieren, während Sie es mit ngFor durchlaufen und ein vorhersagbares Ergebnis erwarten.

Stattdessen müssen Sie die Datenstruktur im Typescript-Code durchlaufen und alle Werte vorberechnen, damit Sie die Vorlage sauber rendern können. Möglicherweise müssen Sie die Struktur der Daten ändern: Anstatt beispielsweise ein boolesches Flag zu speichern, um anzugeben, ob Sie bereits einen bestimmten hall-Wert verwendet haben, speichern Sie einen Verweis auf den Wert, den Sie stattdessen verwenden möchten. Oder besser, teilen Sie die einzelnen pasillosObj Liste in separate Listen gespeichert an den item Elemente, auf diese Weise nicht benötigt die ngIf überhaupt:

<ion-content padding> 
    <template ngFor let-item [ngForOf]="listaRdy"> 
     <template ngFor let-hall [ngForOf]="item.pasillosObj"> 
     <ion-list> 
      <ion-list-header>{{hall.name}}</ion-list-header> 
      <template ngFor let-articulo [ngForOf]="listaRdy"> 
      <ion-item *ngIf="articulo.pasillo==hall.value">{{articulo.name}}</ion-item> 
      </template> 
     </ion-list> 
     </template> 
    </template> 
</ion-content>