Angular 角度2+；可观察和分组

我有一个包含成员的json文件（列：name、lastname、section）。我可以这样读它，并在*ngFor中使用它：

 members: Observable<Member[]>;

 constructor(private _memberService: MemberService) { }

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

我的班级：

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';

---

我可以理解你对可观测的东西感到困惑，但你的问题有点朝着错误的方向发展

类上的成员属性是成员数组的可观察属性，对吗（可观察）？我敢肯定，无论您使用什么样的图表库，都不希望处理可观察对象，而是处理数组（以及对象和嵌套数组等）

因此，在您的例子中，您的第一个调用端口是从您的可观察对象中获取成员数组的实例。一旦拥有了普通的Javascript数组，就可以使用普通Javascript将该数组转换为图表库使用的格式

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

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

在这里，您必须实现该逻辑，以获取您的成员数组，并将其转换为图表使用的任何格式。（我的方法名很可笑，但希望你明白我的意思）

如果您在确定如何进行映射方面遇到困难，您可以提供您的成员数组和预期图表数据的样本，并且您可能会在映射方面获得帮助，但这实际上不是关于可观察对象本身的问题

编辑：

没有关于你想要在图表上显示什么的线索，但是预期的数据是非常直接的

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

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

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

好的，我有一个Members[]数组，但它是可观察的。我无法从普通阵列的可观测数据中获取数据。您使用的my memberArray在哪里。我真的很难过/我更新了代码示例。但是，如果有任何可观察到的数据，您可以订阅以获取数据。非常感谢。订阅是我的关键。

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