Angular 5中ngFor长度的过滤器错误答案

【问题标题】：Filter error in ngFor length in Angular 5Angular 5中ngFor长度的过滤器错误
【发布时间】：2018-09-06 20:09:58
【问题描述】：

我有三个按钮：

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

我正在尝试获取将显示在“全部”中的 Feed 总数。

以及 feed.feed_type != '' 的总数将显示为 Reals。

以及 feed.feed_type == '' 的总计数将显示为 Fakes。

Feed 模型

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

Feed 组件：

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

}

我的服务：

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>

任何建议，感谢帮助。

谁能帮我解答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'

【问题讨论】：

因为你试图过滤一个没有过滤方法的对象。这就是错误消息所说的。过滤器用于数组。
您可以在 35.154.214.245:3000/api/feeds 上看到它是一个数组，而不是一个对象（以方括号开头和结尾）。
请给minimal reproducible example。您看到的是来自 TypeScript 的编译错误，因此它与您指定的类型有关。运行时行为是无关紧要的，你还没有走那么远。如果响应是数组，则需要将其键入为数组。
请检查我之前的问题：stackoverflow.com/questions/49371837/ngfor-length-in-angular-5 它包括代码和我得到的错误。
不：你在问一个新问题，给一个新的minimal reproducible example。根据您之前学到的知识，您应该能够将其缩减为代码的一个特定部分。

标签： angular filter angular5 ngfor

【解决方案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.'));
}

【讨论】：