Angular 2+可观察和可分组

Question

我有一个包含成员的json文件（列：名称，姓氏，部分）。 我可以这样阅读并在* ngFor中使用它：

 members: Observable<Member[]>;

 constructor(private _memberService: MemberService) { }

 ngOnInit() {
     this.members = this._memberService.getMembers();
 }

现在我想使用图表。 但是我无法弄清楚如何才能达到并按可观察的程度分组。 例如，我想按部分对成员进行分组并在图表中使用该值。 有什么帮助吗？

编辑：

我的服务：

  getMembers(){
    return this._http.get(URL_MEMBERS)
    .map((response: Response) => response.json());
  }

我的课：

export class Member {
  section: number;
  number: number;
  firstName: string;
  lastName: string;
  status: string;
  yearOfSep: number;
  yearBook: number;
  class: string;  
  lastPosition: string;
  city: string;
  info: string;
}

期望什么图表：

  public pieChartLabels: string[] = ['X', 'Y', 'Z'];
  public pieChartData: number[] = [300, 500, 100];
  public pieChartType: string = 'pie';

Answer 1

我可以理解您对Observables感到困惑，但是您的问题有点朝着错误的方向发展。

您在类中的成员属性是成员数组的可观察对象，对（可观察）吗？ 我很确定您正在使用的任何图表库都不会处理Observable，而是会处理数组（以及对象和嵌套数组等）。

因此，在您的情况下，第一个调用端口是从您的可观察对象中获取Member数组的实例。 有了普通的日常Javascript数组后，您就可以使用普通的javascript将其整理成图表库使用的格式。

因此，在需要将数据传递到图表的时候，

 let chartData;
 this.members.subscribe(memberArray => {
   chartData = this.massageMemberArrayIntoChartDataFormat(memberData);
 });

您必须在其中实现该逻辑以获取“成员”数组并将其转换为图表使用的任何格式。 （我对方法名很可笑，但希望您能理解我的意思）。

如果您在确定如何执行映射时遇到麻烦，可以提供有关您的成员数组和预期图表数据外观的示例，并且可能会获得有关该映射的帮助，但这实际上不是关于Observables的问题本身。

编辑：

不知道您想要在图表上显示什么，但是预期数据非常简单。

假设您想要一张每个人的全名和姓名的图表：

您已经拥有一个拥有所有数据的Member []。 您的标签和图表数据也是数组，因此在上面的订阅函数中执行以下操作非常简单：

this.members.subscribe(memberArray => {

 // map the member objects in my array to a combined firstname and lastname string
 pieChartLabels = memberArray.map(m => m.firstName + ' ' + m.lastName);

 // map the member objects to their section numbers
 pieChartData = memberArray.map(m => m.section);
});

然后将这些pieChartLabels和pieChartData变量作为属性传递给图表对象。