根据发布的日期显示项目

时间:2017-03-25 16:59:35

标签: angular angular2-template angular2-services

我从Feed网址获取项目列表,如下所示:

   getFeed(){
    return Observable.interval(5000)
      .mergeMap(() => this._http.get(this.feedUrl))
      .map(this.extractFeeds)
      .catch(this.handleError);
  }

  private extractFeeds(res: Response): Feed {
     let feeds = res.json();
     return feeds || { };
  }

这很好用。现在我希望将这些分开,具体取决于feed[].publishedDate;如果时间在最后5分钟内,那么我希望将这些分组到我所拥有的列表中:

  private latestFeeds: Feed[];

如果没有,那么将这些分组到我的另一个列表中:

  private olderFeeds: Feed[];

最好的方法是什么?在实际服务中,还是在模板中使用*ngIf?我的HTML看起来像这样:

<div *ngIf="feeds">
<div *ngFor="let feed of feeds | slice:0:9">
    <div class="row">
        <div class="col-md-12">
            <div class="search-res well">
                <div>
                    <strong>Date Published: </strong>
                    {{feed.publishDate | date:'medium'}}
                </div>
                <a href="{{feed.link}}" target="_blank"><h4>{{feed.title}}</h4></a>
            </div>
        </div>
    </div>
</div>

我的feedComponent.ts如下

  constructor(private _feedService:FeedService) { }

  ngOnInit() {
  this.getFeed();
 }

 getFeed() {
   this._feedService.getFeed()
     .subscribe( res => {
       this.feeds = res;
     })
 }

感谢您的帮助和时间

1 个答案:

答案 0 :(得分:0)

我通过在feed.component.cs

中添加以下代码解决了这个问题
    var currentTimeMinus5Minutes = new Date().setMinutes(new Date().getMinutes() - 5);
    var elementDate = new Date(element.publishDate);
    if(elementDate.getTime() > currentTimeMinus5Minutes){
        this.breakingNewsFeeds.push(element);
    }
    else{
        this.otherFeeds.push(element);
    }

感谢所有帮助人员,特别是指向正确方向的jonsharpe。