时间戳

首页 > 解决方案 > 如何做管道到 src 属性角度

angular - 如何做管道到 src 属性角度

问题描述

如果我这样做：<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}}接缝可以正常工作。我该怎么做？

标签： angularangular-pipe

解决方案

要使用带有绑定到属性的变量的管道，您可以将其包装在带有*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>

推荐阅读