Angular模板调用组件方法报错，无需自定义Pipe如何解决？

嘿，我来帮你搞定这个问题！你的代码里有两个小细节需要调整，完全不用写额外的@Pipe就能解决：

1. 修正*ngIf的变量赋值语法 #

Angular模板里的*ngIf变量赋值有专门的语法，你写的let ud = getUpdated()是错误的，正确的写法应该是*ngIf="getUpdated() as ud"。这个语法错误会直接导致TypeScript解析失败，进而引发后续的一系列报错。

2. 避免undefined触发管道报错 #

当getUpdated()返回undefined或者null时，Angular的date管道会因为接收到无效值而抛出Cannot read property 'toUpperCase' of undefined的错误。我们可以利用*ngIf的特性：只有当表达式返回真值时，才会渲染内部的模板内容，这样就能从根源上避免管道处理无效值的情况。

修正后的完整代码 #

<ng-container *ngIf="getUpdated() as ud">
  <label>Updated</label>
  <span>{{ ud | date:'MMM/y' }}</span>
</ng-container>

如果想更友好地处理没有更新值的场景，还可以加一个else块（可选）：

<ng-container *ngIf="getUpdated() as ud; else noUpdate">
  <label>Updated</label>
  <span>{{ ud | date:'MMM/y' }}</span>
</ng-container>
<ng-template #noUpdate>
  <span>No update record found</span>
</ng-template>

这样调整后，既符合Angular的模板语法规则，又能完美避免undefined导致的管道报错，完全满足你不想写额外Pipe的需求~

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