角度2 * ngIf true - >レンダリングボタン

Question

私のサイトでは、新しい（次の）新しいものと古いもの（前のもの）の間をナビゲートするために、2つのボタンがあります。新しいニュースを見ることができないときに、次のボタンがページに表示されないようにしたい。

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

これは動作しますが、私が望んのだなく、かなりだけでなく、これを行うには、私が使用* ngIf

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

は、ここでより多くの最近のニュースをチェックする機能があります。次のボタンは常にレンダリングされ、チェックが失敗したときにのみ削除されるのではなく、新しいまたは古いニュース項目にナビゲートするたびに再レンダリングされます。 私が探している機能は、チェックが失敗したときを除いて、次のボタンを常にレンダリングして、DOMから次のボタンを削除することです。 どのように私はこれを達成することができますか？

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> 

Answer 1

使用しないでください

Answer 2

は、それが

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

と、次の関数のようにする必要があり、あなたが最初のページの負荷にloadNews()を呼び出していると仮定しますテンプレート式の関数（この場合は*ngIf）です。これは、f各変更検出後に統制が呼び出されます。代わりに変数を使用してください。

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>