如果我这样做:<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}}
可以正常工作。我应该怎么做?
要使用具有绑定到属性的变量的管道,可以使用*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>
您需要在表达式周围使用引号,否则angular将无法解析您的表达式
<img src="{{ event.eventName | lowercase }}" alt=""
或
<img [src]="event.eventName | lowercase" alt=""