Angular Pipe 标题大小写无效的管道错误答案

【问题标题】：Angular Pipe titlecase Invalid Pipe ErrorAngular Pipe 标题大小写无效的管道错误
【发布时间】：2018-10-11 16:27:52
【问题描述】：

我想用 alvis 运算符应用 titlecase 管道，但它没有按预期工作。虽然“数字”管道与 alvis 运算符按预期工作，但 TitleCasePipe().transform() 也在处理相同的值。

选项 1：Chain: {{information?.chains | titlecase}}

抛出错误：

ERROR Error: InvalidPipeArgument: 'bitcoin' for pipe 'TitleCasePipe'
    at invalidPipeArgumentError (common.js:3953)
    at TitleCasePipe.push../node_modules/@angular/common/fesm5/common.js.TitleCasePipe.transform (common.js:4655)
    at checkAndUpdatePureExpressionInline (core.js:9731)
    at checkAndUpdateNodeInline (core.js:10303)
    at checkAndUpdateNode (core.js:10261)
    at debugCheckAndUpdateNode (core.js:10894)
    at debugCheckRenderNodeFn (core.js:10880)
    at Object.eval [as updateRenderer] (UserMenuComponent.html:8)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:10872)
    at checkAndUpdateView (core.js:10248)

选项 2：Chain: {{'bitcoin' | titlecase}} 按预期将字符串值转换为“比特币”。

选项 3：console.log(new TitleCasePipe().transform(this.information.chain)); 按预期将变量值“比特币”转换为“比特币”。

选项 4：Balance: {{information?.balance | number}} 正如预期的那样，将变量值 15603911 转换为 15,603,911。

如何在带有异步数据值的 html 视图中使用 titlecase 管道？

【问题讨论】：

标签： angular angular-pipe

【解决方案1】：

试试怎么样？

<p>Chain: {{ (information?.chains || '') | titlecase}}</p>

【讨论】：

添加 OR 条件有所帮助，但我的真正问题与数据类型有关。链被定义为字符串 [] 而不是字符串。不知何故，它正在从数组中读取第一个值，但无法在数组上应用管道:)。将代码修改为 '{{(undefined === information?.chains) ? '' : (信息?.chains[0] | titlecase)}}'。它现在正在工作。

【解决方案2】：

要将TitleCasePipe 或任何其他需要同步值的管道与异步数据一起使用，请使用AsyncPipe 解开已解析/发出的数据（与Promise 和Observable 一起使用）：

<p>Balance: {{bitcoin$ | async | titlecase}}</p>

【讨论】：

但我已经在我的 ts 文件中通过订阅将值读入对象： import { GetInfo } from '../../../shared/models/getInfo';公开信息：GetInfo = {}; this.appService.informationUpdated .takeUntil(this.infoSub) .subscribe(data => { this.information = data; });
那么，我相信剩下的唯一选择就是将其转换为 ts 文件本身。我无法理解“数字”管道起作用但“标题大小写”不起作用的原因。
我希望我能进一步帮助你，但你的问题并没有显示任何重现你的错误。请显示UserMenuComponent.html。

【解决方案3】：

Titlecase 管道需要包含来自 @angular/common 的 CommonModule。请问您是否添加了该模块？

【讨论】：