Question

我需要找出将对象分组的最佳方法，然后在模板中循环这些组。

数据不会发送给我，因此在我的组件中，我为对象中的每个数组添加一个键：

ngOnInit(): void {
    this.getEmailsService.emailsAPI().subscribe(
        data => {
            let firstChar: string
            this.results = data
            this.emails = this.results
            this.emails.forEach(element => {
                firstChar = element.sender_email.charAt(0);
                element.key = firstChar
                console.log(element)
            });
        }
    );
}

生成的字典如下所示：

created: "2017-10-07T01:42:25.110747Z"
email_domain: "domain.com"
has_user_viewed: false
key: "j"
pk: "wGR"
sender_email:"someone@domain.com"
sender_name: null

然后在我的模板中我有：

<div class="col-sm-6 mb-3" *ngFor="let email of emails | filter : searchText">

通过key值处理分组，然后还为每个组显示“主”“键”的最佳方法是什么？所以你有类似的东西：

key 
->result
->result
->result 
key 
->result
->result
->result

Answer 1

您应该将对象数组标准化为没有键的数组中的所有相同模型。然后，如果你想按特定字段对数组进行分组，这是一个方便的数组转换，可以通过一个字段传递，并通过你选择的任何选择器对整个数组进行分组：

transformArray(array: Array<any>, field) {
    if (array) {
      const groupedObj = array.reduce((prev, cur) => {
        if (!prev[cur[field]]) {
          prev[cur[field]] = [cur];
        } else {
          prev[cur[field]].push(cur);
        }
        return prev;
      }, {});
      return Object.keys(groupedObj).map(key => ({ key, value: groupedObj[key] }));
    }
    return [];
  }

这会将数组分组为对象，其中包含传递给方法的任何内容的“键”，然后是一个名为“value”的嵌套数组，其中包含与分组字段相关的所有对象。

ng按组分组和显示每个组的键

1 个答案: