Angular 2 * ngIf true -> render button

Question

Auf meiner Website habe ich zwei Tasten, nächste und vorherige zwischen neueren (nächsten) und älteren (vorherigen) Nachrichten zu navigieren. Ich möchte verhindern, dass die nächste Schaltfläche auf der Seite gerendert wird, wenn keine neueren Nachrichten zur Ansicht verfügbar sind. Dazu verwendete ich * ngIf

<a *ngIf="isNextNews()" (click)="nextNews()">&#60; Next</a> 

Hier ist die Funktion für mehr aktuelle Nachrichten zu überprüfen:

public isNextNews() { 
     this.findNewsInCategories(); 
     if(typeof this.appConfigService.news[this.newsIndex-1] == 'undefined') { 
      return false; 
     } 
     return true; 
    } 

Dies funktioniert, aber nicht ganz so gut wie ich gehofft hatte. Anstatt dass die nächste Schaltfläche immer gerendert wird und nur entfernt wird, wenn die Prüfung fehlschlägt, wird sie jedes Mal neu gerendert, wenn Sie zu einem neueren oder älteren Nachrichtenelement navigieren. Die Funktionalität, nach der ich suche, ist, dass die nächste Schaltfläche immer gerendert wird, außer wenn die Prüfung fehlschlägt und die nächste Schaltfläche aus dem DOM entfernt wird. Irgendwelche Ideen, wie ich das erreichen kann?

Answer 1

Verwenden Sie keine Funktionen in Template-Ausdrücke (in diesem Fall *ngIf), das ist, weil die f Diese Funktion wird nach jeder Änderungserkennung aufgerufen. Verwenden Sie stattdessen eine Variable.

hasNextNews:boolean = false; //use this in your view 
constructor(){ 
} 

nextNews(){ 
    //your logic 
    this.isNextNews(); //added 
} 

isNextNews() { 
    this.findNewsInCategories(); 
    this.hasNextNews = (typeof this.appConfigService.news[this.newsIndex-1] != 'undefined') 
} 

Html:

<a *ngIf="hasNextNews" (click)="nextNews()">&#60; Next</a> 

Answer 2

Angenommen, Sie loadNews() auf der ersten Seite zu laden anrufen, dann sollte es

var hasNextNews = false; 
public loadNews() { 
    ## load your current news here 
    isNextNews(); 
} 

und nächste Funktion wie:

public isNextNews() { 
    this.findNewsInCategories(); 
    if(typeof this.appConfigService.news[this.newsIndex-1] == 'undefined') { 
     this.hasNextNews = false; 
    } 
    this.hasNextNews = true; 
} 

html:

<a *ngIf="hasNextNews" (click)="nextNews()">&#60; Next</a>