如果数字大于我分配的某个值，则显示“99+”

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+”

Display "99+" if a number is greater than some value I assign

conditional-operator

string-interpolation

angular