从ngFor跳过相同的值
[英]skip same value from ngFor angular2
问题描述
I have a json response like this 
我有一个像这样的json响应
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"
}
]
}
}
Component 零件
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() {
}
}
Component html 组件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>
while iterating over response with ngFor if Title remains same then I don't want to print it,only want to print City . 在用ngFor遍历响应时，如果Title保持不变，那么我不想打印它，只想打印City 。
for ex: 例如：
If Title = Title1 printed once then I don't want to print where Title:"Title1" comes next only print City for that 如果Title = Title1打印了一次，那么我不想在Title:"Title1"出现的地方打印，仅打印该City
Can anyone please suggest a way? 有人可以建议一种方法吗？
2 个解决方案
解决方案1
2 已采纳
Use *ngIf to skip over items which have the same title as the previous one, using the loop index. 使用*ngIf可以使用循环索引跳过标题与上一个标题相同的项目。
<div *ngFor="let item of Optionals; let i = index">
<div *ngIf="item.Title !== Optionals[i - 1].Title">
解决方案2
2 2017-06-28 06:09:03
I have made a plnkr with the solution. 我已经为解决方案做了一个plnkr 。
The answer given by torazaburo only works if the duplicate title is immediately below the original title ie if json response includes an extra Title1 at the bottom it won't work. torazaburo给出的答案仅在重复标题紧接在原始标题下方的情况下才有效；即，如果json响应在底部包含一个额外的Title1 ，则它将不起作用。
I created a pipe to solve this issue: 我创建了一个管道来解决此问题：
@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"
}
]
}
}
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
Angular2 ngFor - 如果没有值则跳过 - Angular2 ngFor - skip if no value
如何在同一标签上的Angular2中使用NgFor中的值？ - How to use value from NgFor in Angular2 on the very same tag?
angular2-跳过ngFor中的第一项 - angular2 - skip first item in ngFor
如何在Angular2中设置动态#id（* ngFor）并从中获取值？ - How to set dynamic #id(*ngFor) and obtain the value from it in Angular2?
Angular2如何仅从ngFor中获取一个值 - Angular2 How to get only one value from ngFor
从angular2 * ngFor数组获取特定值 - Getting a specific value from an angular2 *ngFor array
Angular2 * ngIf，其值来自* ngFor中的Object - Angular2 *ngIf with a value from Object inside *ngFor
Angular2 ng对于折叠总是一样的<tr> - Angular2 ngFor collapses always the same <tr>
如何在Angular2中的ngFor指令中缓存一个值？ - How to cache a value in an ngFor directive in Angular2?
Angular2 ng用于从索引++添加数字 - Angular2 ngFor adding numbers from index ++
相关标签