Question

我的通知变量中包含一个动态数字计数。如果数字小于99，我想使用三进制运算符显示该数字，否则，我想输入99 +。

我已经尝试过了，但是不允许在三进制中进行字符串插值

<div class="notification-badge" *ngIf="unreadNotificationsCount > 0">
    {{(unreadNotificationsCount < 99) ? {{unreadNotificationsCount}} : '99+'}}

Answer 1

{太多。

{{ (unreadNotificationsCount < 99) ? unreadNotificationsCount : '99+' }}

应该工作。

Answer 2

您不能在另一个{{}}内使用{{}}

尝试一下：

{{(unreadNotificationsCount < 99) ? unreadNotificationsCount : '99+'}}

Answer 3

对于更多可重复使用的内容，您可以使用自定义管道。

your-component.component.html

<div *ngIf="yourNumber">
    {{ yourNumber | transalateNumber }}
</div>

transalate-number.pipe.ts

@Pipe({name: 'transalateNumber'})
export class TransalateNumberPipe implements PipeTransform {
    transform(value: number): string {
        if (value <= 99) {
            return value.toString();
        } else {
            return '99+';
        }
    }
}

2。尝试在.ts文件中设置数字格式。

your-component.component.html

<div *ngIf="yourNumber">
    {{ formatNumber(yourNumber) }}
</div>

your-component.component.ts

...
yourNumber: number = 100;

formatNumbar(value: number): string {
    if (value <= 99) {
        return value.toString();
    } else {
        return '99+'
    }
...

如果字符串插值中的数字大于99，我想显示99+

3 个答案: