全部(Reals Fakes),Reals(总计数),Fakes(总计数)

我正在尝试获取将在All中显示的总Feed的总数.

而Feed.Feed_type！=”的总数将显示为Reals.

并且Feed.Feed_type ==”的总数将显示为Fakes.

饲料模型

export class Feeds {
  Feed_id: string;
  Feed_category: string;
  Feed_title: any;
  Feed_description: string;
  Feed_terms: string;
  Feed_type: string;
  checked: false;
  }

饲料成分：

import { Component,OnInit } from '@angular/core';
import { environment } from '../../environments/environment';
import { MyService } from '../shared/services/my-service.service';
import { FeedsService } from '../shared/services/Feeds.service';
import { Feeds } from '../shared/services/Feeds';
import { Feed } from '../shared/services/Feed';
import { Observable } from 'rxjs/Observable';


@Component({
  selector: 'app-Feeds',templateUrl: './Feeds.component.html',styleUrls: ['./Feeds.component.scss']
})

export class FeedsComponent implements OnInit {

  Feeds: Observable<Feed[]>;
  Reals: boolean;
  Fakes: boolean;
  selectedFeedType = '';


  constructor(private myService: MyService,private FeedsService: FeedsService) {
    this.selectedFeedType = 'All';
    this.Reals = true;
    this.Fakes = true;
  }

  ngOnInit() {
    this.Feeds = this.myService.Feeds;
    this.myService.loadAll();
  }


  SelectedFeedsType(event: any) {
    this.selectedFeedType = event.target.value;
    if (this.selectedFeedType === 'All') {
      this.Reals = true;
      this.Fakes = true;
    } else if (this.selectedFeedType === 'Reals') {
      this.Reals = true;
      this.Fakes = false;
    } else if (this.selectedFeedType === 'Fakes') {
      this.Reals = false;
      this.Fakes = true;
    }
  }

}

为MyService：

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { environment } from '../../../environments/environment';
import { HttpClient,HttpHeaders } from '@angular/common/http';
import { FeedsService } from './Feeds.service';
import { Feed } from './Feed';

@Injectable()
export class MyService {
  Feeds: Observable<Feed[]>;
  private _Feeds: BehaviorSubject<Feed[]>;
  private baseUrl: string;
  total = '';
  private dataStore: {
    Feeds: any
  };

    constructor(private http: HttpClient) {
      this.baseUrl  = environment.API_ENDPOINT + 'Feeds';
      this.dataStore = { Feeds: [] };
      this._Feeds = <BehaviorSubject<Feed[]>>new BehaviorSubject([]);
      this.Feeds = this._Feeds.asObservable();
    }

   

     loadAll() { 
        this.http.get(this.baseUrl).subscribe(Feeds => { 
        this.dataStore.Feeds = Feeds;
        console.log(Feeds.length);
        const Reals = Feeds.filter(Feed => Feed.Feed_type !== '').length; 
        console.log(Reals);
        const Fakes = Feeds.length - Reals;
        console.log(Fakes);
        this._Feeds.next(Object.assign({},this.dataStore).Feeds);},error => console.log('Could not load Feeds.'));
      }

    change(Feeds) {
      this._Feeds.next(Feeds);
    }

}

Feeds.Component.html

<ul>
  <li><input  type="radio"  name="FeedType" value="All" checked (change)="SelectedFeedsType($event)">All</li>
  <li><input  type="radio"  name="FeedType" value="Reals"  (change)="SelectedFeedsType($event)">Reals</li>
  <li><input  type="radio"  name="FeedType" value="Fakes"  (change)="SelectedFeedsType($event)">Fakes</li>
</ul>

<table class="table table-bordered">
    <thead>
      <tr><th>Feeds</th></tr>
    </thead>
    <tbody>
      <tr><td>
        <div class="storetabContent"  *ngFor="let Feed of Feeds | async">
        <ng-container *ngIf="Reals && Feed.Feed_type != ''">
          <p>{{ Feed.Feed_title }}</p>
          <p>{{ Feed.Feed_category }}</p>
          <b>REAL</b>
        </ng-container>
        <ng-container *ngIf="Fakes && Feed.Feed_type == ''">
            <p>{{ Feed.Feed_title }}</p>
            <p>{{ Feed.Feed_category }}</p>
            <b>FAKE</b>
        </ng-container>
        </div>
      </td></tr>
    </tbody>

</table>

任何建议,帮助赞赏.