如何使用 angular html 中的管道使我的格式有条件

Question

我怎样才能做一些条件格式。下面的代码将其格式化为两位小数。但是有时行 [column.props] 不是数字类型。有时它的文本值为 'n/a' 在这种情况下如何进行条件格式化？如果它不是数字，我不想将其格式化为数字。

<td *ngFor = "let column of headers">
  {{row[column.prop] | number: '1.1-2'}}
</td>

Answer 1

您可以在模板中使用 *ngIf 来查看该值是否为数字。如果该值不是数字，请使用 else 呈现不同的模板。

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  public values: any[] = [1.23, 11.134223, 'n/a', 0, 'n/a'];
}

<ng-container *ngFor="let val of values">
  <div *ngIf="+val; else nonNumberTemplate">{{ val | number: '1.1-2' }}</div>
  <ng-template #nonNumberTemplate>
    <div>{{ val }}</div>
  </ng-template>
</ng-container>

https://stackblitz.com/edit/angular-ivy-5gmgnu

如何使用 angular html 中的管道使我的格式有条件

How can I make my formatting conditional with pipes in angular html

formatting

angular-pipe

angular