Angular：在ts内使用不在html中的管道

Question

我有一个管道，它根据来自数据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]='...'。

[对于前者，您的字符串按原样传递而无需评估。对于后者（使用[]），您的语句实际上得到了评估-管道将被考虑在内。

Answer 2

您可以将管道插入构造函数中并运行转换函数

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

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

并按如下所示使用它：

icon: new L.DivIcon({
    html: `<div style="width: 65px;";>
             <img src="assets/icon/airplan.jpg" 
               style="width: 20px;height:25px;" 
               class='${this.transformHeading(i.heading)}'/>
          </div>`
})

Answer 3

像这样使用

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

现在管道将返回您想要的东西。