代码之家  ›  专栏  ›  技术社区  ›  Roma Ruzich

角度5管道不执行

  •  2
  • Roma Ruzich  · 技术社区  · 7 年前

    我是新来的。有这样的管道:

    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]
    

    我希望看到: tag1,tag2,tag3。

    编辑:

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

    2 回复  |  直到 7 年前
        1
  •  1
  •   Sunny Goel    7 年前

    删除后尝试运行此代码 []

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

    希望它能起作用,因为 any any[]

        2
  •  1
  •   Roma Ruzich    7 年前

    解决问题的方法是:

    <div *ngSwitchCase="'Tags'">
    

    需要为标记传递“”。

    推荐文章