从观察者角度5中的物体中获取项目计数

Question

这个问题引用了我以前的查询：ngFor长度(角5)

MyService:

​

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

}

​

在这里，在myService，我可以得到总不。把它传递给我的组件。

现在，在我的提要中，我有一个名为feed_type的字段/项，因此我试图得到feed_type ==“和feed_type！=”的计数。

正如您在上面的代码中所看到的，我将它们命名为Reals => feed_type !=‘=> feed_type ==’

我无法将真实值和假值传递给我的组件，然后传递到视图。

提要组件：

​

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方法的完成。

您需要更新服务代码以使用科目(可教)。

主题是一种桥梁或代理，在ReactiveX的某些实现中是可用的，它既是观察者又是可观察的。因为它是一个观察者，它可以订阅一个或多个可观测的，而且因为它是一个可观测的，它可以通过重新发出它们来遍历它观察到的项目，它还可以发出新的项。

• 首先，您必须更新您的Reals属性，使其类型为Subject()；
• 然后，您需要发出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);行。

为了进一步阅读，您可以在网上搜索“在角应用程序中管理状态”，以获得更多的示例。