Question

我有一个包含成员的json文件（列：name，lastname，section）。我可以这样读它并在* 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 of Member数组，对吗（Observable）？我很确定你使用的任何图表库都不希望处理Observables，而是处理数组（以及对象和嵌套数组等）。

因此，在您的情况下，您的第一个调用端口是从您的可观察对象中获取您的Member数组的实例。一旦你有了这个普通的日常Javascript数组，你就可以使用普通的javascript来按照你的图表库使用的格式来按摩那个数组。

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

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

您必须实现该逻辑以获取您的成员数组并将其转换为图表消耗的任何格式。（我对方法名称很荒谬，但希望你明白我的意思。）

如果您在确定如何进行映射时遇到问题，可以提供您的成员数组和预期图表数据的样本，您可以获得该映射的帮助，但这实际上不是关于Observables本身的问题。

修改

没有关于你想要的图表的线索，但预期的数据非常简单。

假设你想要一张每个人的全名和部分的图表：

您已拥有包含所有数据的成员[]。您的标签和图表数据也是数组，因此在上面的订阅函数中执行类似的操作非常简单：

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变量作为属性传递给图表对象。

Angular 2+ Observable和GroupBy

1 个答案: