Question

在我的网站上，我有两个按钮，下一个和上一个按钮，用于在较新（下一个）和较旧（上一个）新闻项之间导航。我希望在没有可供查看的新消息时阻止在页面上呈现下一个按钮。为此，我使用了* ngIf

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

以下是检查最新消息的功能：

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

这有效，但不如我希望的那么好。检查失败时，不会始终呈现下一个按钮而只会删除它，而是每次导航到较新或较旧的新闻项时重新呈现。我正在寻找的功能是总是渲染下一个按钮，除非检查失败，从DOM中删除下一个按钮。我有什么想法可以实现这个目标吗？

Answer 1

不要在模板表达式中使用函数（在本例中为*ngIf），这是因为在每次更改检测后都会调用该函数。改为使用变量。

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

假设您在第一页加载时调用loadNews()，那么它应该像

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

和下一个功能：

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>

Angular 2 * ngIf true - ＆gt;渲染按钮

2 个答案: