在 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（一次）。 这将在管道中， 这样我就可以在下拉列表中绑定 thields 并获得颜色下拉列表。

所以我会有：

 <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

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

  ]
}

模板：

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

}