自定義管道

建立管道

ng g p play-count

實現管道

import { Pipe, PipeTransform } from '@angular/core';
//@Pipe將類標記爲一個管道,name爲調用該管道時使用的符號
@Pipe({     
  name: 'playCount'
})
export class PlayCountPipe implements PipeTransform {
  /*
 1. transfrom中傳入要轉換的值
 2. 返回值爲number或者string
 */ transform(value: number): number | string { 
    if (value > 10000) {
      return Math.floor(value / 10000) + '萬';
 } else {
      return value;
 }
  }
}

使用管道

{{sheet.playCount | playCount}}

管道定義

管道是一些簡單的函數,能夠在模板表達式中(雙大括號)用來接受輸入值並返回一個轉換後的值。
管道類首字母全大寫。name名首字母小寫,其他首字母大寫。函數

建立管道

  • 用@Pipe將類標記,並給定一個含有name字段的對象
  • 實現PipeTransform接口
相關文章
相關標籤/搜索