Typescript 角度自定义管道，用于删除对象数组中的重复项

我使用*ngFor在自定义对象上迭代以填充select下拉列表。对象名称为herdCountSummary。它包含一个字符串变量herdCountSummary.usageperiod，其值的格式为“QTR 1，2020”。其包含的值示例如下：

QTR 1, 2020
QTR 2, 2020
QTR 3, 2020
QTR 4, 2020
QTR 1, 2019
QTR 2, 2019
QTR 1, 2018

我的要求是获得年度部分，并在年度下拉列表中填充它，还有一个季度部分下拉列表。季度下拉列表必须取决于年度下拉列表。因此，如果用户选择该年的2019年，则在季度下拉列表中只能选择QTR 1和QTR 2值

我能够将年度和季度部分分开，但无法删除重复项并使季度下拉列表取决于年份

所以我想写一个自定义管道，然后像这样从html调用该管道

<option *ngFor="let item of herdCountSummary | distinctPipe" value={{item.usagePeriod}}>
   {{item.usagePeriod}}
</option>

{{item.usagePeriod}

---

谁能告诉我怎么写这管子吗。我已经尝试了很多，但是我对Angular和typescript还不熟悉。

我能够通过为年度和季度下拉列表创建单独的管道来完成这项工作。

---

我使用过滤器操作符从年份下拉列表中删除重复项。所以现在我有了明显的年份下拉列表。一旦用户选择了一个特定的年份，我会将所选的年份值发送到季度管道，并与当前年份匹配，如果匹配，则使用split（）分隔季度部分函数，并将被推送到一个数组中，然后返回该数组。

您可以提供您所使用的代码吗？因此，您可以从其他选择框中选择一年，并且应根据所选的年份对选项进行筛选？