从Ng中跳过相同的值以获得angular2
我有一个类似这样的json响应 Json: 组件从Ng中跳过相同的值以获得angular2,angular,typescript,ngfor,Angular,Typescript,Ngfor,我有一个类似这样的json响应 Json: 组件 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
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() {
}
}
<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>
{{optional.OptionalsFor}}
{{item.Title}
={{item.TotalBasicCurrencyRate}{{item.CurrencyName}}{{item.Quantitytext}
ngForTitleCityTitleTitle1Title:“Title1”City有人能提出建议吗？使用循环索引，使用
*ngIf<div *ngFor="let item of Optionals; let i = index">
<div *ngIf="item.Title !== Optionals[i - 1].Title">
使用循环索引，使用
*ngIf<div *ngFor="let item of Optionals; let i = index">
<div *ngIf="item.Title !== Optionals[i - 1].Title">
标题1@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"
}
]
}
}
}
}
@管道({
名称：“uniqueTitleFilter”，
纯：假
})
导出类UniqueFilterPipe实现PipeTransform{
转换（项目：任意[]）：任意{
const uniqueArr=[]；
控制台日志（“项目”，项目）；
const titles=items.map（（value）=>value.Title）；
items.map（（值、索引）=>{
if（titles.indexOf（value.Title）！==索引）{
//我们不需要“标题”，以防重复
删除值。标题
单向推力（值）
}否则{
单向推力（值）
}
})
返回uniqueArr；
}
}
@组成部分({
选择器：“我的应用程序”，
模板：`
标题：{{item.Title}
城市：{{item.City}
`,
})
导出类应用程序{
名称：字符串；
答复：任何；
构造函数（）{
this.name=`Angular！v${VERSION.full}`；
此响应={
“结果代码”：1，
“结果数据”：{
“期权”：[
{
“帮助”：“选项”，
“可选”：“酒店”，
“事件类型”：“成功”，
“msg”：“可选”，
“标题”：“附加服务-酒店-0-0-101”，
“内含物”：“0”，
“城市”：“普吉岛”，
“报价代码”：“Q-INQ-09-2016-0000001/001”，
“查询代码”：“INQ-09-2016-0000001”，
“公司”：15，
“Forquantityname”：“婴儿”，
“TotalBasicCurrencyRate”：0，
“基本发生率”：“货币-0-0-1”，
“CurrencyName”：“USD”，
“Quantitytext”：“每人婴儿”
}, {
“帮助”：“选项”，
“可选”：“酒店”，
“事件类型”：“成功”，
“msg”：“可选”，
“标题”：“附加服务-酒店-0-0-101”，
“内含物”：“0”，
“城市”：“普吉岛”，
“报价代码”：“Q-INQ-09-2016-0000001/001”，
“查询代码”：“INQ-09-2016-0000001”，
“公司”：15，
“Forquantityname”：“EBA”，
“总碱度”：502，
“基本发生率”：“货币-0-0-1”，
“CurrencyName”：“USD”，
“Quantitytext”：“每人CNB”
}, {
“帮助”：“选项”，
“可选”：“酒店”，
“事件类型”：“成功”，
“msg”：“可选”，
“标题”：“附加服务-酒店-0-0-101”，
“内含物”：“0”，
“城市”：“普吉岛”，
“报价代码”：“Q-INQ-09-2016-0000001/001”，
“查询代码”：“INQ-09-2016-0000001”，
“公司”：15，
“Forquantityname”：“EBC”，
“TotalBasicCurrencyRate”：401，
“基本发生率”：“货币-0-0-1”，
“CurrencyName”：“USD”，
“Quantitytext”：“每人EBC”
}, {
“帮助”：“选项”，
“可选”：“酒店”，
“事件类型”：“成功”，
“msg”：“可选”，
“标题”：“附加服务-酒店-0-0-101”，
“内含物”：“0”，
“城市”：“普吉岛”，
“报价代码”：“Q-INQ-09-2016-0000001/001”，
“查询代码”：“INQ-09-2016-0000001”，
“公司”：15，
“Forquantityname”：“房间”，
“TotalBasicCurrencyRate”：2010年，
“基本发生率”：“货币-0-0-1”，
“CurrencyName”：“USD”，
“Quantitytext”：“每人房间”
}, {
“帮助”：“选项”，
“可选”：“酒店”，
“事件类型”：“成功”，
“msg”：“可选”，
“标题”：“附加服务-酒店-0-0-101”，
“内含物”：“0”，
“城市”：“普吉岛”，
“报价代码”：“Q-INQ-09-2016-0000001/001”，
“查询代码”：“INQ-09-2016-0000001”，