如何从angular2中的Observable获取唯一项属性的string[]数组？

我得到了一个可观察的结果。每个项目都有ItemType。items.ItemType具有重复项，如电子产品、家用产品、电子产品。 我需要一个具有唯一ItemType的字符串数组，然后从选择框中选择item以显示属于该类型的所有项目。 我是新手，所以我先道歉

item.service.ts

getAllItems():Observable<Item[]>{
  return this.http.get<Item[]>(this.url+'/AllItems');
}

getAllItems（）：可观察{
返回this.http.get（this.url+'/AllItems'）；
}

item.component.ts

items: Observable<Item[]>;  

loadAllItems() {     
  this.items = this.itemService.getAllItems(); 
}  

项目：可观察；
loadAllItems（）{
this.items=this.itemService.getAllItems（）；
}  

item.component.html

 <mat-select  name="ItemType" > 
   <mat-option *ngFor="let item of items" [value]="item.ItemType">
   {{item.ItemType}}
   </mat-option>
</mat-select>
<table class="table" >
   <tr ngclass="btn-primary">
      <th class="tbl2">Name</th>
      <th class="tbl2"> ItemType</th>
      <th class="tbl2">Price</th>
   </tr>
   <tr *ngFor="let item of items">
      <td class="tbl2">{{item.Name}}</td>
      <td class="tbl2">{{item.ItemType}}</td>
      <td class="tbl2">{{item.ItemPrice}}</td>
</table>

{{item.ItemType}
名称
项目类型
价格
{{item.Name}
{{item.ItemType}
{{item.ItemPrice}}

您应该直接在服务中操作，对可观察的发射值应用map运算符：

return this.http.get<Item[]>(this.url+'/AllItems').pipe(
    map(items => items.filter((item, idx) => a.findIndex(cmp => item.itemType === cmp.itemType) === idx))
);

返回this.http.get（this.url+'/AllItems'）.pipe(
映射（items=>items.filter（（item，idx）=>a.findIndex（cmp=>item.itemType==cmp.itemType）==idx））
);

过滤器的工作方式如下：

• 使用findIndex方法搜索您正在迭代的项
• 如果位置匹配，则表示这是项目的第一次出现
• 如果位置不匹配，则表示您正在获取一个多次出现的项目

检查此处的快速测试：