从 ngFor angular2 中跳过相同的值

Question

我有一个 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

谁能给点建议？

Answer 1

使用 *ngIf 使用循环索引跳过与前一个标题相同的项目。

<div *ngFor="let item of Optionals; let i = index">
  <div *ngIf="item.Title !== Optionals[i - 1].Title">

Answer 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"
                }
            ]
        }
    }
  }


}

从 ngFor angular2 中跳过相同的值

skip same value from ngFor angular2

typescript

ngfor

angular