Angular 5 Pipe doesn't execute

Question

I'm new in angular. Have such pipe:

import { Pipe, PipeTransform } from '@angular/core';
import * as _ from 'lodash';

@Pipe({ name: 'arrayToString' })
export class ArrayToStringPipe implements PipeTransform {
transform(value: any[], name: string): string {
    console.log('----');
    if (_.isEmpty(value))
        return '';

    var result = _.join(_.map(value, function(e) { return name ? e[name] : e; }), ',');
    return result;
   }
}

Have record into declaration part of module file:

import { ArrayToStringPipe } from './pipes/arrayToString.pipe';
...
@NgModule({
imports: [
    ...
],
declarations: [
    ...
    ArrayToStringPipe
],
providers: [
],
exports: [
    ...
    ArrayToStringPipe
]
})
export class SharedModule {
}

And use pipe in other module:

import { SharedModule } from '../shared/shared.module';
@NgModule({
imports: [
   ...
    SharedModule,

],
declarations: [
    ...
],
exports: [
],
entryComponents: [
   ...
],
providers: [
    ...
]
})

and html

 <div *ngSwitchCase="Tags">{{ employee[field.Name] | arrayToString}}</div>

But, in browser I see (there is no errors in console):

[object Object],[object Object],[object Object]

I expect to see: tag1, tag2, tag3.

Any idea, why doesn't pipe work?

EDIT:

Full html

<div *ngIf="!(employees | isEmpty)" class="employee-list">
<table class="b-table">
                <thead>
                    <tr>
                        <th *ngFor="let field of rightGridFields" [ngClass]="{'sorted-column': filter.SortColumn === field.Name }">
                            <a *ngIf="field.Sortable" [ngClass]="{'asc': !filter.SortDescending, 'desc': filter.SortDescending}" (click)="sort(field.Name)">
                                {{field.DisplayName}}
                            </a>
                            <span *ngIf="!field.Sortable">{{ field.DisplayName }}</span>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let employee of employees" (mouseover)="employee.hover = true" (mouseleave)="employee.hover = false" [ngClass]="{'selected': employee.selected,'hovered': employee.hover }">
                        <td *ngFor="let field of rightGridFields" [ngSwitch]="field.Name">
                            <div *ngSwitchCase="Tags">{{ employee[field.Name] | arrayToString}}</div>
                            <div *ngSwitchCase="Birthday">{{ (employee[field.Name] ? employee[field.Name]:'') | formatLocalDate}}</div>
                            <div *ngSwitchDefault>{{ employee[field.Name] }}</div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

EDIT 2: When remove *ngSwitchCase="Tags", pipe begin work. It is bug of angular?

most probably the value you are passing to the pipe is not as expected. what's the schema of employee object? — Ankit Saroch, Dec 04 '18 at 10:59
Your pipe works, that's why you are actually getting a comma separated value. You need to stringify your object in the pipe before returning it — Vinod Bhavnani, Dec 04 '18 at 11:08
Ankit Saroch, employee is a json object with different type fields (string, number). I take employee from http request and in .ts employee has type 'any'. — Roma Ruzich, Dec 04 '18 at 11:10
Vinod Bhavnani, i debug this code. But console.log('----') don't print anything in console. So code below doesn't act — Roma Ruzich, Dec 04 '18 at 11:13
I am not sure - but this can be because your pipe is taking two arguments, but you are sending one - go with - https://stackoverflow.com/questions/36816788/how-do-i-call-an-angular-2-pipe-with-multiple-arguments — sndpkpr, Dec 04 '18 at 11:36
One more, I debug in Chrome. Pass breakpoint at line 'transform(value: any[], name: string): string'. It fire only one, when I don't take data from server. — Roma Ruzich, Dec 04 '18 at 11:36
go with `transform(value): string { console.log('----'); }` if it comes in debug, we will then move to functionality. — sndpkpr, Dec 04 '18 at 11:44

score 1 · Answer 1 · answered Dec 04 '18 at 11:39

try to run this code after removing [] (i.e. value:any[] to value:any) this from the transform function definition

transform(value: any[], name: string): string {

hope it will work because any type include every data type that may be of primitive , array or object so no need to specify any[]

score 1 · Accepted Answer · answered Dec 04 '18 at 12:27

1

Thanks everybody. My mistake is very stupid. Resolve of problem is:

<div *ngSwitchCase="'Tags'">

It is needed to pass '' for Tags.

answered Dec 04 '18 at 12:27

Roma Ruzich

692
5
18

Yeah, all template deriectives take template expressions. They are like property bindings with [], but instead of the brakets you have to write asterix. – Totati Oct 11 '19 at 14:40

Angular 5 Pipe doesn't execute

2 Answers2