我有像这样的json响应
JSON：
{
"resultCode": 1,
"resultData": {
"Optionals": [
{
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-101",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "Infant",
"TotalBasicCurrencyRate": 0,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person Infant"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-101",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "EBA",
"TotalBasicCurrencyRate": 502,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person CNB"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-101",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "EBC",
"TotalBasicCurrencyRate": 401,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person EBC"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-101",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "ROOM",
"TotalBasicCurrencyRate": 2010,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person Room"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-101",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "ADULT",
"TotalBasicCurrencyRate": 502,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person Adult"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-101",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "CNB",
"TotalBasicCurrencyRate": 600,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person CNB"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-102",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "CNB",
"TotalBasicCurrencyRate": 600,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person CNB"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-102",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "ADULT",
"TotalBasicCurrencyRate": 502,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person Adult"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-102",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "ROOM",
"TotalBasicCurrencyRate": 2010,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person Room"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-102",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "EBC",
"TotalBasicCurrencyRate": 401,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person EBC"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-102",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "EBA",
"TotalBasicCurrencyRate": 502,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person CNB"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-102",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "Infant",
"TotalBasicCurrencyRate": 0,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person Infant"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-95",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "EBC",
"TotalBasicCurrencyRate": 401,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person EBC"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-95",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "EBC",
"TotalBasicCurrencyRate": 401,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person EBC"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-95",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "Infant",
"TotalBasicCurrencyRate": 0,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person Infant"
}
]
}
}
组件
import { Component, OnInit } from '@angular/core';
import { Observable,Subscription } from 'rxjs/Rx';
import {QuoteService} from 'app/services/quote.service';
import { asEnumerable } from 'linq-es2015';
export class Optional
{
public Help: string;
public EventType: string;
public OptionalsFor: string;
public msg: string;
public Title: string;
public City: string;
public Inclusions: string;
public Quotcode: string;
public Forquantityname: string;
public TotalBasicCurrencyRate: string;
public BasicCurrency: string;
public CurrencyName: string;
public Quantitytext: string;
}
@Component({
selector: 'optionals',
templateUrl: './optionals.component.html',
styleUrls: ['./optionals.component.css']
})
export class OptionalsComponent implements OnInit {
public optionals:Optional[];
//public optTitle:Optional[];
public Opt = [];
public optTitle = [];
constructor(private quoteService:QuoteService) {
this.getOptionals();
}
getOptionals(){
this.quoteService.getOptionals()
.subscribe(optionals => {
this.optionals = optionals.resultData.Optionals;
this.Opt = asEnumerable(this.optionals).GroupBy(x => x.OptionalsFor, x => x,
(key, b) =>
{ return {
OptionalsFor: key ,Optionals: asEnumerable(b).ToArray() }
})
.ToArray();
console.log(this.Opt);
},
response => {
if (response.status == 404) {
//this.router.navigate(['NotFound']);
}
})
}
ngOnInit() {
}
}
组件html
<div class="supplement-detail">
<div class="supplement-detail-l" *ngFor="let optional of Opt ">
<h5>{{optional.OptionalsFor}}</h5>
<ul *ngFor="let item of optional.Optionals; let i = index; let l=last; ">
<div class="white-line">
<div >
<li *ngIf="item?.Title !== optional.Optionals[i - 1]?.Title" class="s-lft-info">{{item.Title}}</li>
</div>
<li class="r-lft-info">= {{item.TotalBasicCurrencyRate}} {{item.CurrencyName}} {{item.Quantitytext}}</li>
</div>
<hr class="white-line" *ngIf="l">
</ul>
</div>
</div>
ngFor仍然相同，那么在使用Title进行回复时，我不想打印它，只想打印City。
代表：
如果Title = Title1打印一次，那么我不想打印Title:"Title1"接下来只打印City
有人可以建议吗？
答案 0 :(得分：2)
使用*ngIf使用循环索引跳过与前一个项目具有相同标题的项目。
<div *ngFor="let item of Optionals; let i = index">
<div *ngIf="item.Title !== Optionals[i - 1].Title">
答案 1 :(得分：2)
我已经用解决方案制作了plnkr。
torazaburo给出的答案只有在重复标题位于原始标题的正下方时才有效，即如果json响应在底部包含额外的Title1，则无效。
我创建了一个管道来解决这个问题：
@Pipe({
name: 'uniqueTitleFilter',
pure: false
})
export class UniqueFilterPipe implements PipeTransform {
transform(items: any[]): any {
const uniqueArr = [];
console.log("items", items);
const titles = items.map((value) => value.Title);
items.map((value, index) => {
if(titles.indexOf(value.Title) !== index) {
// we don't don't need 'Title' in case it is duplicate
delete value.Title
uniqueArr.push(value)
} else {
uniqueArr.push(value)
}
})
return uniqueArr;
}
}
@Component({
selector: 'my-app',
template: `
<div>
<div [style.marginBottom]="'10px'" *ngFor="let item of response.resultData.Optionals | uniqueTitleFilter">
<span *ngIf="item.Title">Title: {{item.Title}}</span>
<!-- You can show other details here -->
<span>City: {{item.City}}</span>
</div>
</div>
`,
})
export class App {
name:string;
response:any;
constructor() {
this.name = `Angular! v${VERSION.full}`;
this.response = {
"resultCode": 1,
"resultData": {
"Optionals": [
{
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-101",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "Infant",
"TotalBasicCurrencyRate": 0,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person Infant"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-101",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "EBA",
"TotalBasicCurrencyRate": 502,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person CNB"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-101",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "EBC",
"TotalBasicCurrencyRate": 401,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person EBC"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-101",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "ROOM",
"TotalBasicCurrencyRate": 2010,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person Room"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-101",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "ADULT",
"TotalBasicCurrencyRate": 502,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person Adult"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-101",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "CNB",
"TotalBasicCurrencyRate": 600,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person CNB"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-102",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "CNB",
"TotalBasicCurrencyRate": 600,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person CNB"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-102",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "ADULT",
"TotalBasicCurrencyRate": 502,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person Adult"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-102",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "ROOM",
"TotalBasicCurrencyRate": 2010,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person Room"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-102",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "EBC",
"TotalBasicCurrencyRate": 401,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person EBC"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-102",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "EBA",
"TotalBasicCurrencyRate": 502,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person CNB"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-102",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "Infant",
"TotalBasicCurrencyRate": 0,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person Infant"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-95",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "EBC",
"TotalBasicCurrencyRate": 401,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person EBC"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-95",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "EBC",
"TotalBasicCurrencyRate": 401,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person EBC"
}, {
"Help": "Optionals",
"OptionalsFor": "Hotel",
"EventType": "Success",
"msg": "Optionals",
"Title": "Additional Services - For HOTEL-0-0-95",
"Inclusions": "0",
"City": "Phuket",
"Quotcode": "Q-INQ-09-2016-0000001/001",
"Inquirycode": "INQ-09-2016-0000001",
"Corporate": 15,
"Forquantityname": "Infant",
"TotalBasicCurrencyRate": 0,
"BasicCurrency": "CURRENCY-0-0-1",
"CurrencyName": "USD",
"Quantitytext": "Per Person Infant"
}
]
}
}
}
}