Angular 2 - 可以覆盖空值的默认绑定行为答案

【问题标题】：Angular 2 - Possibility to override default binding behavior for null valuesAngular 2 - 可以覆盖空值的默认绑定行为
【发布时间】：2018-12-27 22:41:42
【问题描述】：

在 Angular 2 - 6 中是否可以覆盖空值的默认绑定/插值行为。

例如，

{{ null }} // gives ''

我想覆盖此行为，以便 {{ null }} 在 HTML 中解析为 "NA" 或 "-"。

PS：我知道像{{ null || 'NA' }} 这样实现这一目标的常用方法，但我想要一个集中的解决方案。

更新：

Pipes 绝对是比使用 or 运算符更好的解决方案，但它需要与上面相同数量的代码重复/噪声。 {{ null | NAPipe }} 和 {{ null || 'NA' }} 一样嘈杂。

【问题讨论】：

你也要避免使用管道吗？
是的。尽管管道是集中式解决方案，但它需要在组件中重复相同数量的代码。
只需将其添加到组件Object.keys(this).forEach((key)=>this[key] = this[key] === null ? 'NA' : this[key]) 中的ngOnChanges。我敢肯定还有很多其他方法可以浪费时间来节省自己的时间。
我不确定你为什么被否决。这个问题似乎足够具体，而且框架通常确实提供了全局覆盖某些东西的钩子。
@FrankModica Angular 没有为它如何处理表达式解析提供任何钩子。您有 pipes 和组件中的方法。他似乎不想那样。所以不可能有正确的答案。投反对票可以节省其他人的时间，这样他们就可以避免发布他不接受的答案。

标签： angular binding

【解决方案1】：

您可以使用管道为您的数据提供显示值（此处为 null）

当值为 null 时，管道将返回 'NA'。

@Pipe({ name: 'displayFormatter' })
    export class DisplayFormatterPipe implements PipeTransform {
    public transform(value: any): string {
        switch (value) {
            case null:
                return 'NA'
                break;
            case ... // complete the code   
        }       
    }
}

在你的 html 中

{{value | displayFormatter}}

【讨论】：

【解决方案2】：

如果您不喜欢使用管道，请从生成这些值的方法中返回一个显示值

yourFunction(): any {
    ....
    return this.formatValue(yourValue); // Implement formatValue to generate display value
}

【讨论】：

如果他因为代码重复而不想使用管道，我想他也不会想到处这样做。
但是我的回答可以考虑（至少另一个有类似问题的人），如果他只有一个或最少的 yourFunction() 类似的方法。他可以尽量减少重复