Question

我有三个按钮：

所有（Reals + Fakes），Reals（总计数），Fakes（总计数）

我正在尝试获取将在所有内容中显示的总Feed的总数。

feed.feed_type的总数！=＆＃39;＆＃39;这将显示为Reals。

feed.feed_type ==＆＃39;＆＃39;这将显示为Fakes。

Feed模型

＆＃13;

export class Feeds {
  feed_id: string;
  feed_category: string;
  feed_title: any;
  feed_description: string;
  feed_terms: string;
  feed_type: string;
  checked: false;
  }

＆＃13;

Feed Feed：

＆＃13;

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;
    }
  }

}

＆＃13;

为MyService：

＆＃13;

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);
    }

}

＆＃13;

Feeds.Component.html

＆＃13;

<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>

＆＃13;

任何建议，帮助表示赞赏。

有人可以帮我解决this previous question的问题吗？

无法理解为什么会出现此错误：

Failed to compile.
src/app/shared/services/my-service.service.ts(34,38): error TS2339: Property 'filter' does not exist on type 'Object'. 

src/app/shared/services/my-service.service.ts(35,37): error TS2339: Property 'filter' does not exist on type 'Object'

Answer 1

我在我的GET请求中修复了它：

loadAll() {
  this.http.get<Feeds[]>(this.baseUrl).subscribe(feeds => {
    this.dataStore.feeds = feeds;
    this.Reals.next(feeds.filter(feed => feed.feed_type !== '').length);
    this.Fakes.next(feeds.filter(feed => feed.feed_type !== '').length);
    this._feeds.next(Object.assign({}, this.dataStore).feeds);
  }, error => console.log('Could not load feeds.'));
}

在Angular 5中以ng为长度过滤错误

1 个答案: