Question

我有一个包含属性的对象列表：groupID，但是只有一些元素拥有此属性的值。在模板中，我想将ngFor与唯一管道一起用于列表。但是在应用之后，对于属性的值也为null。

有没有办法对管道应用某种条件？

下面是解决我的问题的简单示例。

list = [
 {ID: "001", groupID: "246"},
 {ID: "002", groupID: "246"},
 {ID: "003", groupID: ""},
 {ID: "004", groupID: ""},
 {ID: "005", groupID: "135"},
 {ID: "006", groupID: "135"},
 {ID: "007", groupID: ""},
]

HTML

<div *ngFor="let l of list | unique: 'groupID'">
 <app-A [inputObject]="l['groupID']" *ngIf="l['groupID']!=''"></app-A>
 <app-B [inputObject]="l" *ngIf="l['groupID']==''"></app-B>
</div>

然后，一个组件收到两个对象，它们是正确的{ID：“ 001”，groupID：“ 246”}和{ID：“ 005”，groupID：“ 135”}。但是，B组件仅收到{ID：“ 003”，groupID：“”}，因为唯一管道也捕获了空值。

Answer 1

如果您查看ngx-pipes unique pipe源代码，则会注意到，您无法将其他任何参数传递给它来实现所需的功能。

第一个想法可能是与作者讨论，最终您可以提出拉取请求。

第二个想法只是创建自己的管道，这是我的看法：

@Pipe({
  name: 'unique'
})
export class UniquePipe implements PipeTransform {
  transform(arr: any[], propertyName: string): any {
    const res = arr.reduce((acc, curr) => {
      if (!acc.valuesSet.has(curr[propertyName])) {
        acc.array.push(curr)
        acc.valuesSet.add(curr[propertyName]);
      }

      return acc;
    }, { valuesSet: new Set(), array: [] })

    return res.array;
  }
}

还有一个演示：https://stackblitz.com/edit/angular-3sfcw3

如何在条件下应用ngx-pipe“唯一”？

1 个答案: