如何通过管道传输到 src 属性 angular

Question

如果我这样做：<h2>{{event.role | lowercase}}</h2>。但是，如果我尝试像这样在 src 属性中使用它：

<img src={{event.eventName | lowercase}} alt="">

我收到错误：

core.js:6237 ERROR DOMException: 
Failed to execute 'setAttribute' on 'Element': '|' is not a valid attribute name.

它没有识别管道，但是，没有正确使用管道，所以格式 {{event.eventName}} 接缝可以工作。我应该怎么做？

Answer 1

要使用带有绑定到属性的变量的管道，您可以使用 *ngIf 指令将其包装在容器中。它还允许您应用管道一次并多次重用修改后的变量。尝试以下

<ng-container *ngIf="event.eventName | lowercase as name">
  <img [src]="name" alt="">

  <!-- reuse the variable with the pipe applied -->
  <img [src]="name" alt="">
</ng-container>

Answer 2

您需要在表达式周围使用引号，否则angular将无法解析您的表达式

<img src="{{ event.eventName | lowercase }}" alt=""

或

<img [src]="event.eventName | lowercase" alt=""

如何通过管道传输到 src 属性 angular

how to do pipe to src attribute angular

angular-pipe

angular