Tablica grupowa w kątowa2 - kątowa, maszynopis, ngfor

Mam taką odpowiedź

Odpowiedź JSON

"Terms": [
{
"Help": "Terms",
"EventType": "Success",
"Srno": 1,
"Heading": "Discount Condition",
"TermsDesc": "50 % Discount on 1st Cab Ride"
},
{
"Help": "Terms",
"EventType": "Success",
"Srno": 2,
"Heading": "Discount Condition",
"TermsDesc": "20% Discount on Nights more than 8"
},
{
"Help": "Terms",
"EventType": "Success",
"Srno": 1,
"Heading": "Stay Condition",
"TermsDesc": "No More than 10% Discount on Less than 4 Nights Stay"
},
{
"Help": "Terms",
"EventType": "Success",
"Srno": 2,
"Heading": "Stay Condition",
"TermsDesc": "20% Discount on Nights more than 8"
},
{
"Help": "Terms",
"EventType": "Success",
"Srno": 3,
"Heading": "Discount Condition",
"TermsDesc": "No More than 10% Discount on Less than 4 Nights Stay"
}
],

Chcę to pogrupować Heading. Podobny Heading powinien to mieć TermsDesc na przykład Warunek rabatu i Warunek pozostania od odpowiedzi

Warunek rabatu

• „50% zniżki na pierwszą przejażdżkę taksówką”
• „20% zniżki na noce powyżej 8”
• „warunek 3”

Warunek pozostania

• „50% zniżki na pierwszą przejażdżkę taksówką”
• „20% zniżki na noce powyżej 8”
• „warunek 3”

Funkcja komponentu, w której otrzymuję odpowiedź

 getTerms(){
this.quoteService.getTerms()
.subscribe(
terms => {
this.terms = terms.resultData.Terms;
this.notes = terms.resultData.ImpNotes;
this.exclusions = terms.resultData.Exclusions;
var arr=[];
var strHeading;
var title;
var temp = 0;
var listing = [];
for(let i=0;i<this.terms.length;i++) {
strHeading=this.terms[i].Heading;
title=this.terms[i].TermsAndConditionsDesc;
if(!this.uniqTerm[temp]){
this.uniqTerm[temp] = [];
}
if (arr.indexOf(strHeading) !== -1) {
this.uniqTerm[temp].push({"header":strHeading});
}
else {
arr.push(strHeading);
this.uniqTerm[temp].push({"header":strHeading});
listing.push({"title":title});
this.uniqTerm[temp].push({"title":title});
temp++;
}
},
response => {
if (response.status == 404) {
}
});
}

Jak mogę utworzyć Array, aby móc go używać *ngFor?

Myślę, że potrzebowałbym czegoś takiego

[0]:object
Heading:"Discount Condition"
TermsDesc: object
term: Term1
term: Term2

[1]:object
Heading:"Stay Condition"
TermsDesc: object
term: Term1
term: Term2

ale nie wiem jak to osiągnąć w kątach2 proszę mi pomóc tutaj lub jeśli ktoś ma lepsze sugestie, chętnie spróbuję

Dzięki

Odpowiedzi:

3 dla odpowiedzi № 1

Możesz użyć linq-es2015 biblioteka w ten sposób:

import { asEnumerable } from "linq-es2015";

class Term
{
public Help: string;
public EventType: string;
public Srno: number;
public Heading: string;
public TermsDesc: string;
}

//somewhere in component
this.terms: Term[];
this.result = asEnumerable(this.terms).GroupBy(x => x.Heading, x => x, (key, b) => { return { Heading: key, TermsDesc: asEnumerable(b).ToArray() } }).ToArray();

//template
<ul>
<li *ngFor="let term of result">
{{term.Heading}}
<ul>
<li *ngFor="let item of term.TermsDesc">{{item.TermsDesc}}</li>
</ul>
</li>
</ul>

---

1 dla odpowiedzi nr 2

Mam rozwiązanie po kilku kopaniach, ale odpowiedź Slava Utesinova również działa, ale musi zostać zainstalowana linq-es2015.

const groupedObj = this.terms.reduce((prev, cur)=> {
if(!prev[cur["Heading"]]) {
prev[cur["Heading"]] = [cur];
} else {
prev[cur["Heading"]].push(cur);
}
return prev;
}, {});
this.TermCons = Object.keys(groupedObj)
.map(Heading => ({ Heading, TermsDesc: groupedObj[Heading] }));

---