Question

我创建了一个可重用的Component，它接受某个类的数组。现在我想将一个Pipe传递给这个Component，它将该数组的每个元素转换为我想要的可视化表示。（这会根据数组对象的类而改变。）

现在我不知道如何直接在模板中使用此管道。我设法让它与一个以编程方式调用管道的额外函数一起工作：

export class SingleCategoryFilterComponent<T> implements OnInit {

  @Input()
  possibleFilterValues: T[];
  @Input()
  displayPipe: PipeTransform;

  constructor() {}

  ngOnInit() {}

  transformValue(value: T) {
    return this.displayPipe.transform(value);
  }

}

和（部分）模板：

<button mat-menu-item *ngFor="let value of possibleFilterValues">
    {{transformValue(value)}}
</button>

但我宁愿不必创建这个转换函数，只需要能够做到这样的事情：

<button mat-menu-item *ngFor="let value of possibleFilterValues">
    {{value | displayPipe}}
</button>

但这似乎不起作用，因为displayPipe未注册。有没有办法在模板中使用变量@Input displayPipe？

Answer 1

如果在模板中使用包装管道来处理这个问题，并将displayPipe管道作为管道transform方法的参数传入，那该怎么办？像下面的东西（可能需要某种调整以适应你的问题，但你明白了）

在模板中，

<button mat-menu-item *ngFor="let value of possibleFilterValues">
    {{value | wrappingPipe:displayPipe}}
</button>

包装管，

@Pipe({
  name: 'wrappingPipe'
})
export class WrappingPipe implements PipeTransform {
  transform(value: any, displayPipe?: PipeTransform): any {
    if(value !== undefined) {
      return displayPipe && displayPipe.transform ? displayPipe.transform(value) : value;
    } else {
      return value;
    }
  }
}

Answer 2

/usr/share/graylog/data/config

为我工作。

不是

{{值| displayPipe}}

您一直在寻找，但这是我找到的最短的解决方案。

如何使用在HTML模板中作为@Input传递的管道

2 个答案: