Javascript，按字母顺序对数组进行排序并嵌套每个字母

Question

我目前正在从事 ionic2 项目。我正在数组中获取数据，并且必须将其显示为带有侧字母导航的联系人列表样式。请参阅所附图片。

数据结构有点像这样

[
{"id":1,"first_name":"Harcourt"},
{"id":2,"first_name":"Cart"},
{"id":3,"first_name":"Laina"},
{"id":4,"first_name":"Deborah"},
{"id":5,"first_name":"Kendricks"}
]

我可以使用 lodash 按名字对数组进行排序。但我无法弄清楚如何在 angular2 中使用 *ngFor 显示排序数组，以便每次字母表更改(例如从 A -> B)时，第一个元素可以被赋予唯一的 id，以便当用户点击侧面时条形字母表我可以滚动到该元素。

请帮忙。我应该为此创建一些嵌套数组吗？

Answer 1

你可以尝试这样的事情:

let input = [
	{ id: 2, first_name: "Cart" },
	{ id: 4, first_name: "Deborah" },
	{ id: 6, first_name: "Dobby" },
	{ id: 1, first_name: "Harcourt" },
	{ id: 5, first_name: "Kendricks" },
	{ id: 6, first_name: "Lenny" },
	{ id: 3, first_name: "Laina" }
    ],
    people = []

let firstLetter = ""

for(let i in input) {
	let currentLetter = input[i].first_name[0].toUpperCase()
	if(currentLetter!=firstLetter) {
		firstLetter = ""+currentLetter
		people.push({ index : firstLetter})
	}
	people.push(input[i])
}

console.log(people)

然后在您的模板中，有条件地显示名称或索引:

<li *ngFor="let p of people">
    <div *ngIf="p.first_name; else listIndex">
       {{p.firstName}}
    </div>

    <ng-template #listIndex>
        <div class="list-index">
           {{p.index}}
        </div>
    </ng-template>
<li>