Angular : Using pipe inside ts not in html

Question

我有一个管道，它根据来自 data json 的值返回 css 字符串。

主要组件

this.coords.push(new L.Marker([i.lat, i.lng], {
  rotationAngle: i.heading,
  rotationOrigin: 'bottom center',
  icon: new L.DivIcon({
    html: `<div style="width: 65px;";>
             <img src="assets/icon/airplan.jpg" style="width: 20px;height: 25px;" ngClass='${i.heading}| heading'/>
           </div>`
  })
}).addTo(this.map)

问题是当我运行我的项目时，我只得到相同的管道名称输出，我的意思是看起来管道不起作用!输出

<img src="assets/icon/airplan.jpg" style="width: 20px;height: 25px;" ngclass="272|heading">

有什么想法请提出来

Answer 1

您是否尝试过使用不带 ${} 括号的 ngClass ？

[ngClass]='i.heading | heading'

否则，您可以在组件类中运行管道:

您可以将管道注入(inject)构造函数并运行转换函数

@Component({...})
export class MyComponent {
  constructor(private headingPipe: HeadingPipe) {}

  transformedHeading(heading: string) {
    return this.headingPipe.transform(heading);
  }
}

并在您的模板中

<img [ngClass]="transformedHeading(i.heading)"/>