基于日期范围的项目角度计数。上个月,当前月,本周

时间:2017-05-22 18:03:59

标签: angular date typescript

我有一个角度组件,它调用服务从MongoDB中检索JSON对象。这里的一切都很好用。

在myObj中我有一个字段installDate,它是日期格式。我想显示JSON对象的长度输出。我知道如何获取我的html中的对象总数

{{(data)?.length}} 

如何显示日期范围内返回的JSON数量?我正在寻找上个月,当月和本周的长度?

先谢谢你。

我的组件

import { Component, OnInit } from '@angular/core';
import { myObj } from "../../myObj";
import { myService} from "../../myService";

@Component({
    selector: 'app',
    providers: [myService],
    templateUrl: './template.html'
})
export class Component implements OnInit {
    public data: myObj [];
    public filterQuery = "";
    public rowsOnPage = 10;
    public sortBy = "installDate";
    public sortOrder = "desc";

    public constructor(private _dataService: myService) {
    }

    ngOnInit(): void {
        this._dataService
            .getAll()
            .subscribe((data: myObj []) => this.data = data,           
            error => console.log(error),
            () => console.log("getAllItems() complete"));
    }
 }

我的服务

import { Injectable } from "@angular/core";
import { Http } from "@angular/http";
import "rxjs/add/operator/map";
import { Observable } from "rxjs/Observable";
import { myObj} from "../../myObj";

@Injectable()
export class myService {

   constructor(private _http: Http) {
   }

   public getAll = (): Observable<myObj[]> => {
       return this._http.get("api/records")
           .map(data => data.json());
   };
}

我的HTML snipbit

<div class="row">
    <h4 class="col-xs-6">Total Records: {{(data)?.length}}</h4>
</div>
<table class="table table-striped" [mfData]="data | dataFilter : filterQuery" #mf="mfDataTable"
               [mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
<thead>
    <tr>
        <th>
            <mfDefaultSorter by="installDate">Install Date</mfDefaultSorter>
        </th>
        <th>
            <mfDefaultSorter by="appName">App Name</mfDefaultSorter>
        </th>            
    </tr>
</thead>
<tbody>
    <tr *ngFor="let audit of mf.data">
        <td>{{ audit.installDate  | date:"yyyy-MM-dd" }}</td>
        <td>{{ audit.appName }}</td>
    </tr>
</tbody>

0 个答案:

没有答案