Angular 2过滤掉重复的下拉事件

Question

有没有人知道如何在am angular 2下拉列表中过滤掉报告结果。我目前正试图在模板* ngFor中做但没有运气。我也会尝试定制管道。数据来自JSON数组。在下面的对象中，我试图仅显示“国有实体”的一个实例

我的数据对象

items[
      {  
       "currentBUName":"Financial Services"
      }
      {  
       "currentBUName":"State Owned Entities"
      }
      {  
       "currentBUName":"State Owned Entities"
      }
     ]

我的ts代码提取

    <ion-item>
     <ion-label>Please select current business unit</ion-label>
      <ion-select [(ngModel)]="selectedValue">
          <ion-option *ngFor="let indexx of this.items;"[value]="indexx">{{indexx.currentBUName}}</ion-option>
      </ion-select>
    </ion-item>

Answer 1

设置items的值时，请使用过滤器函数仅获取唯一值。这可以这样做：

this.items = this.items.filter((v, i, arr) => arr.indexOf(v) === i);

注意：如果此数据来自服务器，那么在服务器端进行此过滤会更有意义，以减少线路上的重复信息量。

Answer 2

为什么不使用数组filter？

items = [
  {  
   "currentBUName":"Financial Services"
  }
  {  
   "currentBUName":"State Owned Entities"
  }
  {  
   "currentBUName":"State Owned Entities"
  }
 ]
uniqueItems = items.filter(function(item, pos) {
    return items.indexOf(item) == pos;
})

然后使用uniqueItems代替

Answer 3

其他答案都很好，但是你可以采用一种方式来定义一些更通用的效用函数

var noAccent = str.normalize( "NFD" ).replace( /[\u0300-\u036f]/g, "" );
if (str !== str) {// Add a duplicate entry without the accent}

然后你可以写

function groupBy<T>(values: T[], keySelector: (value: T) => string): {[key: string]: T[]} {
  return values
      .map(value => ({ key: keySelector(value), value }))
      .reduce((groups, { key, value }) => ({
        ...groups,
        [key]: groups[key] && groups[key].concat(value) || [value]
      }), {});
}

function distinctBy<T>(values: T[], keySelector: (value: T) => string): T[] {
  const groups = groupBy(values, keySelector);
  return Object.values(groups).map(([representative]) => representative);
}