Angular8：如何过滤唯一记录

Question

• 想要实现。想要在下拉菜单中填充唯一元素。

• 问题描述：我想在下拉菜单中填充唯一的元素。

根据查询得到的记录，有些值是重复的，但我无法在下拉菜单中显示唯一的值。

• 试图实现 。

寻找一种方法，只显示唯一的记录。

• 目前的实施情况

**

• 储存库代码。

**

@Repository
public interface CategoryRepository extends JpaRepository<ccCategory,Integer>
{

    public static final String FIND_CATEGORYNAME = "SELECT DISTINCT * from xxCategory where active='1'";

    @Query(value = FIND_CATEGORYNAME, nativeQuery = true)

    List<xxCategory > getCategoryName();
}

**-

• 主计长 :

**

@GetMapping("/getAllCategory")
        public List<xxCategory> getAllCategory() {
        List<ccCategory> cCategory = categoryRepository.getCategoryName();
        return cCategory;
    }

- Angular Side.NET

<label class="control-label">Category: </label>
                <select  [(ngModel)]="listAllCategory" name="enquirycategory" class="form-control" required>


                    <option *ngFor="let enquirycategory of listAllCategory" [value]="enquirycategory.ID">
                      {{enquirycategory.categoryName}}
                  </option>

Answer 1

你可以在渲染到DOM之前过滤结果。

以下是你如何过滤。

this.uniqueCatogaries = this.categories.filter((item, index, self) =>
  index === self.findIndex((t) => (
    t.id === item.id
  ))

然后在 component.html *ngFor 关于 uniqueCatogaries 数组:

<select  [(ngModel)]="listAllCategory" name="enquirycategory"     class="form-control" required>
<option *ngFor="let enquirycategory of uniqueCatogaries" [value]="enquirycategory.ID">
{{enquirycategory.name}}
</option>
</select>

这里是工作实例。 演示