基于另一个Observable排序的Observable——Angular

Question

我有一个名为" History"其中有一个元素数组。它由这个json文件表示:(正如你所看到的，有3种类型的条目，只是id改变了…)

我想创建另一个可观察对象，在这个对象中，我存储按它们在json文件中出现的次数排序的每种类型的条目。使用上面的json文件。

我如何浏览我的"历史"?观察并创建一个分类"Content"可观察的，基于"历史记录"中每个条目的出现次数可见

Answer 1

假设基于SNS的两个条目相同。

首先你需要计算所有的条目，然后你可以把它们排序。

这是一个实现，其中original$是原始的可观察对象。

new$ = original$.pipe(map((res: any) => this.sort(res.history)));
sort(history: any[]): any[] {
const result = [];
const counts: { [key: string]: number } = {};
for (const i of history) {
if (counts[i.SNS] === undefined) {
counts[i.SNS] = 0;
result.push(this.stripId(i));
}
counts[i.SNS]++;
}
return result.sort((a, b) => counts[b.SNS] - counts[a.SNS]);
}
stripId(object: any) {
const result = { ...object };
delete result.id;
return result;
}

我使用any，因为我懒得为这个例子创建类型，但是你应该使用实际的类型。

Stackblitz: https://stackblitz.com/edit/angular-ivy-rqzyx8?file=src/app/app.component.ts

Answer 2

我们可以创建一个函数groupByhttps://stackoverflow.com/a/21776652/15439733来按属性对项目进行分组，并使用sort来按长度对数组进行排序。https://stackoverflow.com/a/11208371/15439733

html:

<div *ngFor="let group of groupedData">
<br />
<br />
{{ group.length }} items
<div *ngFor="let item of group">
<br />
id: {{ item.id }} SNS:{{ item.SNS }} DMC:{{ item.DMC }} date:{{
item.date | date: 'short'
}}
showTrash: {{ item.showTrash }} points: {{ item.points }}
</div>
</div>

groupedData: any;
ngOnInit(): void {
of(this.history).subscribe((data) => {
this.groupedData = groupBy(data, 'title').sort((a, b) => {
return b.length - a.length;
});
console.log(this.groupedData);
});
}
ngOnDestroy() {}
}
export function groupBy(collection, property) {
let i = 0,
val,
index,
values = [],
result = [];
for (; i < collection.length; i++) {
val = collection[i][property];
index = values.indexOf(val);
if (index > -1) result[index].push(collection[i]);
else {
values.push(val);
result.push([collection[i]]);
}
}
return result;
}

0: (3) [{…}, {…}, {…}]
1: (2) [{…}, {…}]
2: (1) [{…}]

json = [
[
{
"id": 3,
"SNS": "74-10-02 Fuel Metering Unit (FMU)",
"title": "Chidori Fuel Metering Unit (FMU) - Removal",
"DMC": "DMC-PW800-A-75-10-17-00A-520A-A",
"date": "2022-07-02T21:26:42.826Z",
"showTrash": false,
"points": 0
},
{
"id": 874119204.715397,
"SNS": "74-10-02 Fuel Metering Unit (FMU)",
"title": "Chidori Fuel Metering Unit (FMU) - Removal",
"DMC": "DMC-PW800-A-75-10-17-00A-520A-A",
"date": "2022-07-02T21:28:38.116Z",
"showTrash": false,
"points": 0
},
{
"id": 221440940.97637305,
"SNS": "74-10-02 Fuel Metering Unit (FMU)",
"title": "Chidori Fuel Metering Unit (FMU) - Removal",
"DMC": "DMC-PW800-A-75-10-17-00A-520A-A",
"date": "2022-07-02T21:28:38.679Z",
"showTrash": false,
"points": 0
}
],
[
{
"id": 2,
"SNS": "85-05-14 Flange B Bracket Relocation",
"title": "Mangekyu Conversion - Miscellaneous",
"DMC": "DMC-PW800-A-72-31-28-00A-910A-B",
"date": "2022-07-02T21:26:41.098Z",
"showTrash": false,
"points": 0
},
{
"id": 653540875.8536806,
"SNS": "85-05-14 Flange B Bracket Relocation",
"title": "Mangekyu Conversion - Miscellaneous",
"DMC": "DMC-PW800-A-72-31-28-00A-910A-B",
"date": "2022-07-02T21:28:34.530Z",
"showTrash": false,
"points": 0
}
],
[
{
"id": 144280205.0483089,
"SNS": "72-00-10 General",
"title": "Rasengan Low Pressure Compressor",
"DMC": "DMC-PW800-A-72-31-25-00A-910A-8",
"date": "2022-07-02T21:28:32.971Z",
"showTrash": false,
"points": 0
}
]
]
for (const group of json) {
console.log(group)
}

工作示例:https://stackblitz.com/edit/angular-ivy-vtx8mk?file=src%2Fapp%2Fapp.component.html