angular custom pipeline omitted character

It is required when the show 10 Chinese characters, English time display 20 characters, do not know how to achieve specific, think of the pipeline

Here is the method

1. implement a custom pipeline function, inherited methods, but also in api to see the status of implementation have yet to understand how specific

2.transform method parameters

Conduit outset, inherited Transform method, as shown, in addition to the specific parameters is a first pass over the rest are free to set their parameters.

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

@Pipe({
    name: 'fiterCodeLength'
})
export class FiterCodeLengthPipe implements PipeTransform {

    transform(value: any, wordwise?: any, max?: any, tail?: any): any {
}
}

3. Specific functions to achieve omitted characters

First, for specific characters according to the length of the English conversion, and then to intercept the characters according to the length

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

@Pipe({
    name: 'fiterCodeLength'
})
export class FiterCodeLengthPipe implements PipeTransform {

    transform(value: any, wordwise?: any, max?: any, tail?: any): any {

        if (!value) return '';
        max = max == undefined ? 20 : parseInt(max, 10);
        var length = this.getChars(value);
        if (length <= max) return value;

        let i = 0; let c = 0; let rstr = '';

        // 开始取
        for (i = i; c < max; i++) {
            let unicode = value.charCodeAt(i);
            if (unicode < 127) {
                c += 1;
            } else {
                c += 2;
            }
            rstr += value.charAt(i);
        }
        return rstr + (tail || ' …');
    }

    getChars(str) {
        
        var length = 0.0;
        var unicode = 0;
        if (str == null || str == "") {
            return 0;
        }
        var len = str.length;
        for (var i = 0; i < len; i++) {
            unicode = str.charCodeAt(i);
            if (unicode < 127) { //判断是单字符还是双字符
                length += 1;
            } else {  //chinese
                length += 2;
            }
        }
        return length;
    }
}

4. Page specific method

// 传参的形式,用:隔开
{{data.Cust_Name|fiterCodeLength:true:16}}

angular custom pipeline omitted character

Guess you like