戻りリストに一度だけ活字体

Question

に私はこのようになりますJSONオブジェクトを持っています：赤、青、ピンク（一度）。 これはパイプ内にあり、 ですから、ドロップダウンで値札をバインドして色をドロップダウンすることができます。

だから私は持っています：

<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" *ngFor="let data of data | custompipe"> 
<a class="dropdown-item" href="#">{{data.color}}</a> 

私はtypescriptですでこれを行うにはどうすればよいですか？ オブジェクトにはどのように色が表示されますが、一度だけ表示されます。

Answer 1

あなたは簡単にlodash

<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" *ngFor="let data of data | customPipe"> 
     <a class="dropdown-item" href="#">{{data.color}}</a> 
</div> 

transform(records: Array<any>): any { 
    return _.uniqBy(records, 'Color'); 
} 

Answer 2

Demo

import { Component, Pipe } from '@angular/core'; 

@Pipe({ name: 'custompipe' }) 
export class Custompipe implements PipeTransform { 
    transform(data: any[]): any[] { 
    let colors : any[]= []; 
    return data.filter((el) => { 
     if (colors.indexOf(el.Color) == -1){ 
      colors.push(el.Color); 
      return true; 
     } 
     return false; 
    }) 

    } 
} 

@Component({ 
    selector: 'my-app', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 

    data = [ 
    { "Name": "First", "Color": "Red" }, 
    { "Name": "First", "Color": "Blue" }, 
    { "Name": "First", "Color": "Red" }, 
    { "Name": "First", "Color": "Pink" }, 
    { "Name": "First", "Color": "Red" }, 
    { "Name": "First", "Color": "Blue" }, 
    { "Name": "Dont Show", "Color": "Red" } 

    ] 
} 

テンプレートで使用してこれuniqBy方法を達成することができます。データの変更、他の回答が動作しない場合は

<div class="dropdown-menu" *ngFor="let d of data| custompipe "> 
<a class="dropdown-item" href="#">{{d.Color}}</a> 
</div> 

Answer 3

。そのため、パイプではなく、手動で行う方がよいです。または不純なパイプを使用してください。

<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" *ngFor="let color of colors"> 
<a class="dropdown-item" href="#">{{color}}</a>  


this.colors= [...new Set(data.map(item => item.Color))]; 

Answer 4

import {Pipe} from '@angular/core'; 

@Pipe({name: 'distinct'}) export default class { 
    tranform<T>(values: T[], keyOrKeySelector?: keyof T | ((x: T) => any): T[] { 
    const keySelector = 
     typeof keyOrKeySelector === 'function' 
      ? keyOrKeySelector 
      : ((x: T) => JSON.stringify(x[keyOrKeySelector])); 

     const results = values.reduce((distinct, value) => ({ 
     ...distinct, 
     [keySelector(value)]: value 
     }), {}); 

     return Object.values(results); 
    } 
} 

キーと

<div *ngFor="let item of data | distinct" 
    class="dropdown-menu" 
    aria-labelledby="dropdownMenuButton"> 
    <a class="dropdown-item" href="#">{{item.color}}</a> 
</div> 

（構造的な比較を行うためにJSON.stringifyを使用する）キーまたは機能使用することなく使用、突起と色

<div *ngFor="let item of data | distinct: 'color'" 
    class="dropdown-menu" 
    aria-labelledby="dropdownMenuButton"> 
    <a class="dropdown-item" href="#">{{item.color}}</a> 
</div> 

使用によって異なるアイテムを選択任意の基準で異なる項目を選択する

はあなたの中にある

<div *ngFor="let item of data | distinct: toId" 
    class="dropdown-menu" 
    aria-labelledby="dropdownMenuButton"> 
    <a class="dropdown-item" href="#">{{item.color}}</a> 
</div> 

がモデルを表示

@Component({}) export default class { 

    toId = (item: {id: number, name: "First", color: "Red"}) => ({item.id, item.color}); 

}