删除重复的选择选项

Question

使用 Angular 5，我创建了一个选择下拉列表，该下拉列表由来自 Web 请求的数据填充。我想删除具有重复对象属性

DocumentGroup

的项目。如果不结合 jQuery 和 Angular，我该如何做到这一点？

这是我的 HTML：

<select class="form-control">
  <option *ngFor="let doc of docs; [value]="doc.DocumentGroup">
    <span>
      {{doc.DocumentGroup}}
    </span>
  </option>
</select>

网络请求的TS：

  ngOnInit() {
    this.http.get("https://test.com/_api/web/lists/getbytitle('Document Separator Barcodes')/items?$orderBy=ID").subscribe(data => {
      console.log("data", data);
      console.log("data.value", data['value']);
      this.docs = data['value'];
    });
  }

Answer 1

我能够通过循环遍历结果，将每个

DocumentGroup

属性添加到数组中，然后使用 @72GM 提到的方法从该数组中获取唯一的项目来实现此目的。

整个函数现在看起来像这样：

  ngOnInit() {
    this.http.get("https://portal.oldnational.com/corporate/portalsupport/_api/web/lists/getbytitle('Document Separator Barcodes')/items?$orderBy=ID").subscribe(data => {
      console.log("data", data);
      console.log("data.value", data['value']);
      this.docs = data['value'];

      for (let i = 0; i < this.docs.length; i++) {
          this.docs[i];
          console.log("DocGroup loop", this.docs[i].DocumentGroup)
          this.docgroups.push(this.docs[i].DocumentGroup)
          console.log("DocGroupArray", this.docgroups)
      }

      this.unique = Array.from(new Set(this.docgroups));
      console.log(this.unique)

    });
  }

Answer 2

您可以在 TypeScript 文件中执行此操作，并在填充 this.docs 集合之前过滤掉任何重复项。