从 Observer 中的对象获取项目计数 Angular 5

Question

这个问题参考了我之前的查询：

我的服务：

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

@Injectable()
export class MyService {
  feeds: Observable<Feed[]>;
  private _feeds : BehaviorSubject<Feed[]>;
  private baseUrl: string;
  Fakes: any;
  private dataStore : {
    feeds: any
  };
  Reals: number;

    // Using Angular DI we use the HTTP service
    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);
        this.Reals = feeds.filter(feed => feed.feed_type !== '').length;
        console.log(this.Reals);
        this.Fakes = feeds.length - this.Reals;
        console.log(this.Fakes);
        this._feeds.next(Object.assign({}, this.dataStore).feeds);
      }, error => console.log('Could not load feeds.'));
    }    
      
    change(feeds) {
      this._feeds.next(feeds);
    }

}

在我的服务中，我可以得到总数。提要并将其传递给我的组件。

现在在我的 feeds 中，我有一个名为 feed_type 的 field/item，所以我正在尝试获取 feed_type 的计数 == "" 和 feed_type !="".

正如您在上面的代码中看到的，我将它们命名为 Reals => feed_type != ' ' 和假货 => feed_type == ' '

我无法将 Reals 和 Fakes 值传递到我的组件，然后再传递到视图。

供稿组件：

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 = '';
  realcount: number;


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

  ngOnInit() {
    this.feeds = this.myService.feeds;
    this.realcount = this.myService.Reals;
    console.log(this.myService.Reals);
    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;
    }
  }

}

感谢帮助，谢谢。

Answer 1

正如@alex 评论的那样，问题是 loadAll 方法是异步的，因为它使用 HttpClient.Get

当您调用 loadAll() 时，它会执行并继续您组件中的下一行代码，它不会等待 HttpClient.Get 方法完成。

您需要更新服务代码才能使用 subjects(abservable)

A Subject is a sort of bridge or proxy that is available in some implementations of ReactiveX that acts both as an observer and as an Observable. Because it is an observer, it can subscribe to one or more Observables, and because it is an Observable, it can pass through the items it observes by reemitting them, and it can also emit new items.

首先，您必须将 Reals 属性更新为类型主题();
然后你需要发出实数值。
您还需要订阅 Reals 属性这样您就可以值更改时通知：

服务：

import { Subject } from "rxjs/Subject";

public Reals = new Subject<number>();

loadAll() {
      this.http.get(this.baseUrl).subscribe(feeds => {
        this.dataStore.feeds = feeds;
        console.log(feeds.length);
        this.Reals.next(feeds.filter(feed => feed.feed_type !== '').length);       
      }, error => console.log('Could not load feeds.'));
    }

组件：

...
this.myService.Reals.subscribe((reals)=>
{
    console.log(reals);
});

注意 this.Reals.next(feeds.filter(feed => feed.feed_type !== '').length); 行。

如需进一步阅读，您可以在线搜索 "Managing State in Angular Applications" 以获取更多示例。

从 Observer 中的对象获取项目计数 Angular 5

Get Count of Item from Object in Observer Angular 5

observers

ngfor

angular

angular5