时间戳

首页 > 解决方案 > 角度模板函数调用

angular - 角度模板函数调用

问题描述

是否可以在像 covert{{item.size}} 这样的 angulat 模板中调用转换函数？如果可能的话，正确的语法是什么？谢谢。

 <mat-cell *matCellDef="let item" fxHide fxShow.gt-xs fxShow.gt-md [matTooltip]="item.size">
                                            <span *ngIf="!item.isFolder">covert{{item.size}}</span>
                                        </mat-cell>

#代码转换器

 convert(x){
    const units = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
     let l = 0, n = parseInt(x, 10) || 0;
     while(n >= 1024 && ++l){
         n = n/1024;
     }
     return(n.toFixed(n < 10 && l > 0 ? 1 : 0) + ' ' + units[l]);
   }

标签： angulartypescript

解决方案

Angular 提供了一种通过管道实现此目的的方法。您可以创建一个管道并将转换逻辑放在那里。这是一个不错的选择，因为如果您需要在应用程序中的任何其他地方使用，则可以轻松地将此类逻辑绑定到组件功能，这不是一个好主意。

使用angular cli或仅通过创建管道及其规范来创建管道。

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

@Pipe({name: 'convert'})
export class convert implements PipeTransform {
  transform(x: number): number {
   const units = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
     let l = 0, n = parseInt(x, 10) || 0;
     while(n >= 1024 && ++l){
         n = n/1024;
     }
     return(n.toFixed(n < 10 && l > 0 ? 1 : 0) + ' ' + units[l]);
  }
}

我没有更改任何转换逻辑，因为我认为它没有任何问题。现在，您可以像这样在组件中使用此管道：

<mat-cell *matCellDef="let item" fxHide fxShow.gt-xs fxShow.gt-md [matTooltip]="item.size">
        <span *ngIf="!item.isFolder">{{item.size | convert}}</span>
</mat-cell>

推荐阅读