Question

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

例如

{{ null }} // gives ''

我想重写此行为，以使{{ null }}解析为HTML中的"NA"或"-"。

PS：我知道{{ null || 'NA' }}这样的通用方法，但是我想要一个集中的解决方案。

更新：

与使用或运算符相比，

Pipes绝对是更好的解决方案，但它需要与上述相同数量的代码重复/噪声。 {{ null | NAPipe }}和{{ null || 'NA' }}一样吵。

Answer 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}}

Answer 2

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

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

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

2 个答案: