按字母顺序排序和分组

Question

我需要创建UI,如下所示.我需要订购name alphabetically和需要分组A,B等等.

我已完成第一部分(即按字母顺序使用命名lodash),如下所示.

contacts.html

<ion-list>
    <ion-item *ngFor="let c of contacts | async">
      <name-and-rating item-start [data]="c"></name-and-rating>
      <ion-input type="text" text-right disabled="true" [value]="c.company">
      </ion-input>
    </ion-item>
  </ion-list>

name-and-rating.html(组件)

<div>
  <div>
    {{data.name}}
  </div>
  <div>
    <rating [ngModel]="data?.rating" (ngModelChange)="data.rating=$event" readOnly="true" max="5" emptyStarIconName="star-outline"
    halfStarIconName="star-half" starIconName="star" nullable="false" name="rating" item-end>
  </rating>
  </div>
</div>

附加contact.ts

 addContact() {
    this.storage.get('contacts').then((val: Contact[]) => {
      this.contacts = val;
      if (this.contacts == null) this.contacts = [];
      this.contacts.push(this.data);
      const sortedContacts = orderBy(this.contacts, [c => c.name.toLowerCase()], ['asc']);
      this.storage.set('contacts', sortedContacts).then((val: Contact[]) => {
        this.close();
      });
    });
  }

contact.ts

export class Contact {
    id: string;
    name: string;
    company: string;
    phone1: number;
    phone2: number;
    email: string;
    rating: number;
    comments: string;
}

你能告诉我如何alphabetically grouping在第一张图片上设计或实现吗？

Answer 1

为每个键创建一个数组,并将所有已排序的联系人映射到该键.

const contacts= [{
    name: 'Aa',
    company: 'Company name',
    locaton: 'Location',
    other: 'other'
}, {
    name: 'Aab'
}, {
    name: 'Bb'
}, {
    name: 'Cc'
}, {
    name: 'Ccc'
}, {
    name: 'Fff'
}, {
    name: 'Faa'
}, {
    name: 'Ba'
}];

const sorted = contacts.sort((a, b) => a.name > b.name ? 1 : -1);

const grouped = sorted.reduce((groups, contact) => {
    const letter = contact.name.charAt(0);

    groups[letter] = groups[letter] || [];
    groups[letter].push(contact);

    return groups;
}, {});

const result = Object.keys(grouped).map(key => ({key, contacts: grouped[key]}));

console.log(result);

迭代所有键,然后遍历与该键关联的所有联系人.

例如

<div *ngFor="let group of result">
    <h3>result.key</h3>
    <contact *ngFor="let contact of result.contacts" [contact]="contact"></contact>
</div>