在Typescript中僅返回一次數組值列表

Question

我有一個看起來像這樣的JSON對象：

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

]

我想創建一個Typescript函數，該函數將僅返回Color..so字段的不同值：Red，Blue，Pink（一次）。 這將在管道中，因此我可以將Thield綁定在一個下拉列表中，並具有一個下拉列表顏色。

所以我將有：

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

我該如何在打字稿中做到這一點？ 我如何獲得顏色出現在對象中，但是只有一次。

Answer 1

您可以在lodash中使用uniqBy方法輕松實現此目標

<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

演示版

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

  ]
}

模板：

<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);
  }
}

沒有鍵或函數的用法（使用JSON.stringify進行結構比較）

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

與按鍵配合使用，按顏色選擇不同的項目

 <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>

視圖模型中的toId在哪里

@Component({}) export default class {

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

}