Question

1）我从服务器获取对象数组。该数组包含有关所有作者的信息。我在名为AnalyticsDataComponent的组件中构建了它，并显示包含所有作者及其数据的列表。

2）我创建了一个名为WriterComponent的组件，其中我只想显示属于用户的数据。因为我不想再次向服务器发送请求并获得包含该数据的响应，所以我创建了ShareService来共享整个数组。使用我的WriterComponent我尝试过滤数组，以便只获得正确的数据。我使用Observable.from而不是有效。

路线

export const routes: Routes = [
    {path: '', redirectTo: '/login', pathMatch: 'full'},
    {path: 'login', component: LoginComponent},
    {path: 'data', component: AnalyticsDataComponent},
    {path: 'writer/:writerID', component: WriterComponent}
];

AnalyticsDataComponent

export class AnalyticsDataComponent implements OnInit {

    analyticsData: Array<AnalyticsData>;
    overall: Object;
    loading: boolean;
    ready: boolean;
    whileLoding: boolean = true;
    year: string = '2016';
    month: string = '10';
    startDate: string;
    endDate: string;
    public months = Month;

    constructor(
        private services: AnalyticsDataService,
        private cookie: CookieService,
        private auth: AuthService,
        private shareService: ShareService
    ) {
        this.analyticsData = [];
    }

    ngOnInit(): void {
        this.auth.redirectNotAuthUser();
        this.setDateRange(
            {
                'year': this.year,
                'month': this.month,
            }
        );
    }

    setDateRange(value) {
        this.year = value.year;
        this.month = value.month;
        if (value.year && value.month) {
            this.whileLoding = false;
            let month = value.month;
            let lastDate = new Date(value.year, month, 1).toISOString().split('T')[0];
            this.startDate = value.year + '-' + value.month + '-' + '01';
            this.endDate = lastDate;
            this.getData();
        }
    }

    getData() {
        this.loading = true;
        this.ready = false;
        this.services.getData(this.cookie.get(), this.startDate, this.endDate)
            .subscribe(
            (response) => {
                this.overall = response.overall;
                response.data.forEach((element: any, index: number) => {
                    this.analyticsData.push(
                        new AnalyticsData({
                       pagePath: element.pagePath,
                        pageTitle: element.pageTitle,
                        wholeProfit: element.wholeProfit,
                        uniquePageView: element.uniquePageView,
                        entrance: element.entrance,
                        avgTime: element.avgTime,
                        bounceRate: element.bounceRate,
                        pageView: element.pageView,
                        author: element.author
                        })
                    );
                });
                this.loading = false;
                this.ready = true;
                this.whileLoding = true;
            },
            (error) => {
                this.loading = false;
                this.whileLoding = true;
                console.log('Error happened' + error);
            },
            () => {

                this.shareService.analyticsData = this.analyticsData;
                this.shareService.overallData = this.overall;
                console.log('the subscription is completed');
            }
            );
    }
}

WriterComponent

export class WriterComponent implements OnInit {

  writerID: number;
  writerData: Array<Object>;

  constructor(private route: ActivatedRoute, private shareService: ShareService) {
    route.params.subscribe(params => { this.writerID = params['writerID']; });
    this.writerData = [];

  }

  ngOnInit() {
    this.filterData();
  }


  filterData() {
    if (this.shareService.analyticsData !== undefined) {
      this.shareService.analyticsData.forEach(element => {
        Observable.from([element])
          .filter(data => data.author.user_id === this.writerID)
          .subscribe(
          data => {
            this.writerData.push(
              new AnalyticsData({
            pagePath: data.pagePath,
            pageTitle: data.pageTitle,
            wholeProfit: data.wholeProfit,
            uniquePageView: data.uniquePageView,
            entrance: data.entrance,
            avgTime: data.avgTime,
            bounceRate: data.bounceRate,
            pageView: data.pageView,
            author: data.author
              })
            );
          },
          err => {
            console.error(err);
          }
          );
      });
    }
  }


}

Answer 1

我想你想要像

这样的东西

  ngOnInit() {
    this.data = this.filterData();
  }

  filterData() {
    if (this.shareService.analyticsData !== undefined) {
      return this.shareService.analyticsData
      .filter(data => data.author.user_id === this.writerID)
      .map(data => {
          new AnalyticsData({
            pagePath: element.pagePath,
            pageTitle: element.pageTitle,
            wholeProfit: element.wholeProfit,
            uniquePageView: element.uniquePageView,
            entrance: element.entrance,
            avgTime: element.avgTime,
            bounceRate: element.bounceRate,
            pageView: element.pageView,
            author: element.author
          })
      });
    } 
    return Observable.of([]);
  }

然后绑定到

之类的数据

[someInputThatUsesData]="data | async"

使用Observable.from过滤数组

1 个答案: