那些遇到过的问题

从 ngFor angular2 跳过相同的值

Nik*_*iya 1 typescript ngfor angular

我有这样的 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"
            }
        ]
    }
}
Run Code Online (Sandbox Code Playgroud)

成分

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() {
  }

}
Run Code Online (Sandbox Code Playgroud)

组件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>
Run Code Online (Sandbox Code Playgroud)

在迭代响应时，ngFor如果Title保持不变，那么我不想打印它，只想打印City。

例如：

如果Title=Title1打印一次，那么我不想打印下Title:"Title1"一个只打印City的位置

任何人都可以请提出一种方法吗？

小智 5

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

<div *ngFor="let item of Optionals; let i = index">
  <div *ngIf="item.Title !== Optionals[i - 1].Title">
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

1592 次

最近记录：

8 年，8 月 前
相关归档
通过将useNewUrlParser设置为true,避免"当前URL字符串解析器已弃用"警告 210
如何从Typescript中的函数中获取参数类型 32
在Angular 2中,是否可以淡入/淡出而不是[hidden ='xxx]？ 21
遇到合并冲突标记 21
每个新的角度生产PWA版本上的“意外令牌&lt;”，直到站点刷新 13
TypeScript：要求两个数组的长度相同？ 8
Angular2 ngcloak未编译的元素？ 7
Angular 6 - 多个子组件应该属于同一实例 7
如何使用 Jsdocs 和 Typescript 记录 React 功能组件 7
打字稿本地依赖项(多个项目) 6
难疑归档
Python有三元条件运算符吗？ 5591
什么是依赖注入？ 2984
如何将Git存储库克隆到特定文件夹中？ 2083
如何在MySQL中使用命令行导入SQL文件？ 1836
如何计算列表项的出现次数？ 1417
什么是monad？ 1373
如何检查字符串是否包含Objective-C中的另一个字符串？ 1200
wait()和sleep()之间的区别 1158
如何将参数传递给批处理文件？ 1100
如何按值排序多维数组？ 1058