按字母顺序排序和分组

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>

add-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>

Answer 2

您可以使用 Set 生成一组唯一的首字母，array.reduce 用于分组，array.sort 用于按字母顺序排序

var names = ["Daniel", "Adam", "Cesar",  "Dave", "Abraham" ].sort((a, b) => b < a ? 1: -1);
var initials = [...new Set(names.map(name => name[0]))];
var categorized = initials.reduce((m, i) => {
    m[i] = names.filter(name => name[0] === i).sort((a, b) => b < a ? 1 : -1);
    return m;
}, {});
console.log(categorized);

然后，在您的组件中，让 Object.keys 在模板中可访问，以便您可以使用 *ngFor 循环访问对象：

export class YourComponent {
  objectKeys = Object.keys;
}

<ion-list>
  <ion-item *ngFor="let category of ObjectKeys(categorized)">
    <ion-list>
      <ion-item *ngFor="let c of categorized[category]">
        <ion-input type="text" text-right disabled="true" [value]="c.company">
      </ion-item>
    </ion-list>
  </ion-item>
</ion-list>