アルファベット順にグループ化する

Question

以下のようにUIを作成する必要があります。私はname alphabeticallyを注文し、A、Bのようにグループ化する必要があります。

Iは、以下に示すように（すなわち、アルファベット順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> 

名前と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> 

Answer 2

あなたは、あなたのコンポーネントに、次にアルファベット順

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

をソートするのArray.sortグループ化のため array.reduce と、ユニークなイニシャルのセットを生成するために設定を使用することができます* ngForを使用してオブジェクトをループできるように、テンプレートでObject.keysにアクセスできるようにします。

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>