Angular 5 管道不执行

Question

我是 angular 的新人。有这样的管子：

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;
   }
}

记录到模块文件的声明部分：

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

并在其他模块中使用管道：

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

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

和html

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

但是，我在浏览器中看到（控制台中没有错误）：

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

我希望看到：标签 1、标签 2、标签 3。

知道吗，为什么管道不起作用？

编辑：

完整 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>

编辑 2：当删除 *ngSwitchCase="Tags" 时，管道开始工作。这是 angular?

的错误

Answer 1

在从转换函数定义

中删除 []（即 value:any[] 到 value:any）后，尝试运行此代码

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

希望它会起作用，因为 any 类型包括可能是原始数据、数组或对象的所有数据类型，因此无需指定 any[]

Answer 2

谢谢大家。我的错误非常愚蠢。解决问题是：

<div *ngSwitchCase="'Tags'">

标签需要传''

Angular 5 管道不执行

Angular 5 Pipe doesn't execute

angular

angular5