typescript 更改颜色-管道Angular

ghhkc1vu 于 2023-03-31 发布在 TypeScript

关注(0)|答案(2)|浏览(155)

我想在我的Angular 模板中执行2个转换。第一个是改变箭头的方向向下，如果它是一个负数，如果它是一个正数，箭头将改变方向向上。我用管道完成了这一点。
第二个转变是：如果数字是负数，它的颜色将是红色，如果它是正数，它的颜色将是绿色。
这是我为箭头创建的管道：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'topBar'
})
export class TopBarPipe implements PipeTransform {

  transform(value: number): string {
    if(value < 0){
     return 'arrow_downward'
    }
    else if(value > 0){
      return  'arrow_upward'
    }
    return ''
  }

}

这是调用管道的HTML：

<mat-icon>{{
 qtdEvents.lastMonthMinusCurrentMonthQuantity | topBar
  }}</mat-icon>

箭头的问题解决了，但是我不知道如何解决数字是正还是负时改变颜色的问题。我该怎么办？我也要用管子吗？

typescript

来源：https://stackoverflow.com/questions/75860550/change-color-pipe-angular

2条答案

按热度按时间

8xiog9wr1#

创建一个管道只是为了改变颜色将是一个矫枉过正。你可以通过以下方式实现同样的效果：

<mat-icon [ngStyle]="{ color: (qtdEvents.lastMonthMinusCurrentMonthQuantity < 0) ? 'red' : 'green' }">
  {{ qtdEvents.lastMonthMinusCurrentMonthQuantity | topBar }}
</mat-icon>

赞(0）回复(0）举报 2023-03-31

4c8rllxm2#

您可以定义另一个管道以基于值获取颜色：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'iconColor'
})
export class IconColorPipe implements PipeTransform {

  transform(value: number): string {
    if (value < 0) {
      return 'red';
    }
    return 'green';
  }
}

然后使用ngStyledirective更新mat-icon的颜色

<mat-icon [ngStyle]="{ 'color': qtdEvents.lastMonthMinusCurrentMonthQuantity | iconColor }">
  {{ qtdEvents.lastMonthMinusCurrentMonthQuantity | topBar }}
</mat-icon>

赞(0）回复(0）举报 2023-03-31

我来回答

typescript 更改颜色-管道Angular

2条答案

相关问题

热门标签

最新问答