Angular 5自定义trim管道未触发调用，原因何在？

你遇到的问题核心是运算符优先级的问题！Angular模板里的管道运算符|优先级比三元条件运算符?:更高，所以当前代码中，trim管道实际上只被应用到了三元表达式的最后一部分''上，而不是你期望的整个bg.name ? (bg.name + ', ') : ''的结果。

举个例子，你当前的代码：

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

会被Angular解析成：

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

显然，空字符串经过trim处理还是空字符串，而当bg.name存在时，拼接后的, 根本没经过管道处理——只有空字符串走管道的场景下，你的管道日志自然不会输出。

只需要把整个三元条件表达式用括号括起来，强制让管道作用于整个表达式的结果即可：

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

• 确保你的TrimPipe已经在对应的Angular模块的declarations数组中注册，否则Angular无法识别这个自定义管道。
• 检查TrimPipe的transform方法是否正确实现，比如：

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

@Pipe({ name: 'trim' })
export class TrimPipe implements PipeTransform {
  transform(value: string): string {
    console.log('管道被调用'); // 这里应该能输出日志
    return value.slice(0, -1); // 移除最后一个字符的核心逻辑
  }
}

内容的提问来源于stack exchange，提问作者Yashwardhan Pauranik