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

你会在你的打字稿文件中这样做，并在填充你的this.docs集合之前筛选出任何重复的内容......类似于这个

https://www.codementor.io/tips/8243973127/how-to-remove-duplicates-within-a-javascript-array-using-es6-in-just-one-line

Answer 2

我能够通过循环结果，将每个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)

    });
  }

删除重复的选择选项

2 个答案: