我正在使用*ngFor迭代一个自定义对象，以填充选择下拉列表。对象名称为herdCountSummary。它包含一个字符串变量herdCountSummary.usageperiod，其值形式为"；QTR 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>
有人能告诉我怎样才能写这根管子吗。我已经试过了，但我对Angular和打字还不熟悉。
我能够通过为年度和季度下拉列表创建单独的管道来完成这项工作。我使用了筛选运算符从年份下拉列表中删除重复项。所以现在我有了不同的年份下拉列表。一旦用户选择了一个特定的年份，我就会将所选的年份值发送到季度管道，并与当前年份匹配，如果匹配，则使用split((函数分离季度部分，并将其推送到一个数组中，然后返回该数组。