Question

我正在尝试在angular4中的interpollated表达式中实现条件检查。我写的逻辑工作正常，但想检查是否有更好的方法。我担心的是我的表格中有20个这样的字段。我是否需要明确检查条件＆gt;每行1000000或

我的代码

  <div class="tb-row d-flex flex-row">
                    <div class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6">{{'CAPTIVES.RESULTS.NVA.PREMIUM_PAID'|translate}}</div>
                      <div *ngFor="let result of results" class="tb-cell col-sm-6 col-md-3 col-lg-2 col-6"> {{(result?.captiveInsPremiumPaidTotal > 1000000) ? (result?.captiveInsPremiumPaidTotal|number:'.0-2') : (result?.captiveInsPremiumPaidTotal|number:'.0-0') }} </div>
                </div>

Answer 1

这有点清洁：

<div *ngFor="let result of results">
  <ng-container *ngIf="result.captiveInsPremiumPaidTotal">
    {{ captiveInsPremiumPaidTotal > 1000000 ? captiveInsPremiumPaidTotal | number:'.0-2' :  captiveInsPremiumPaidTotal | number:'.0-0')
  </ng-container>
</div>

您还可以考虑创建自己的数字格式化管道，它将是内置Decimal管道的包装器。

自定义格式化程序管道可能如下所示：

import { Component, Pipe } from '@angular/core';
import {DecimalPipe} from '@angular/common';

@Pipe({
  name: 'customFormatter'
})
export class CustomFormatterPipe {
  transform(val: string, ...args: any[]) {
    const format = args[0] ? '1.0-2' : '1.0-0'; 
    return this.decimalPipe.transform(val, format);
  }

  constructor(private decimalPipe: DecimalPipe) { }
}

@Component({
  selector: 'my-app',
  template:`
    <div> {{ num | customFormatter: num > 100 }}</div>
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {  
  num = 1000;
}

正如您所看到的，它只根据作为参数传递的布尔条件选择一种格式（'1.0-2' or '1.0-0'）。

Live demo

在插值字符串角度4

1 个答案: