我的 Angular 5 Pipe "trim" 没有被调用，为什么？

Question

我创建了一个名为 trim 的 angular Pipe。此管道旨在从字符串中删除最后一个字符。这是我的烟斗 class TrimPipe。当在 HTML 中使用管道时，控制台不会记录这些值。 HTML 此处用法 -

<ng-container *ngFor="let bg of backgrounds.preferred">
       <span>{{bg.name ? (bg.name + ', ') : '' | trim}}</span>
   </ng-container>

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

@Pipe({
  name: 'trim'
})
export class TrimPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    console.log(value, args, 'Pipes');
    return value.toString().substring(0, value.length - 1);
  }

}

我的app.module.ts文件-

import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {HttpClientModule} from '@angular/common/http';

// Custom
import {AppComponent} from './app.component';
import {CommonService} from './shared/services/common.service';
import {DirectivesModule} from './shared/directives/directives.module';
import {PipeModule} from './shared/pipe/pipe.module';]


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    DirectivesModule,
    PipeModule,
    HttpClientModule,
    BrowserModule,
    BrowserAnimationsModule,
    NgSelectModule,
    FormsModule
  ],
  providers: [CommonService],
  bootstrap: [AppComponent]
})
export class AppModule {
}

我的 pipe.module.ts -

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TrimPipe } from './trim.pipe';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [TrimPipe],
  exports: [TrimPipe]
})
export class PipeModule { }

Answer 1

当 bg.name 为假时，您仅在空字符串上使用管道。通过移动括号修复：

<span>{{(bg.name ? bg.name + ', ' : '') | trim}}</span>

顺便说一句，如果您将整个逻辑移动到管道或在将字符串传递给模板之前预先格式化它（即在组件或服务代码中），您将获得性能优势。 Angular 在每个变化检测周期运行模板插值中的所有评估，同时缓存纯管道直到输入值发生变化。

Answer 2

这是一个非常保守的版本，应该可以捕获任何错误。

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

@Pipe({name: 'trim'})
export class TrimPipe implements PipeTransform {
  transform(inValue: any): string {
    let value = '';
    try {
      value = inValue.toString();
      console.log('TrimPipe: >>' + value + '<<');
      return value.substring(0, value.length - 1);
    } catch (err) {
      console.log(err);
      return value;
    }
  }
}

总的来说，您的代码看起来是正确的，但我发现有几个问题：

转换应该总是返回一个字符串
try/catch 绕过内脏是个好主意，这样您就有机会看到任何错误。

我发现对于将在随机位置使用的较低级别的东西，将它们写成 "defensively" 是一个好主意，以便在任何可以扔给它们的东西中幸存下来。

我的 Angular 5 Pipe "trim" 没有被调用，为什么？

My Angular 5 Pipe "trim" is not getting called, why?

angular

pipe

angular-pipe