J'ai un nombre de nombres dynamiques qui vient à ma variable de notification.

J'utilise l'opérateur ternaire pour afficher ce nombre s'il est inférieur à 99, sinon je veux afficher "99+".

J'ai essayé ceci:

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

..mais cela n'autorise pas l'interpolation de chaîne à l'intérieur du ternaire

1
Andrew 17 juil. 2019 à 11:54

3 réponses

Meilleure réponse

Trop de { s.

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

Devrait marcher.

3
mbojko 17 juil. 2019 à 08:56
  1. Pour plus de choses réutilisables, vous pouvez utiliser un tuyau personnalisé pour cela.

Votre-composant.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. Essayez de formater votre numéro dans votre fichier .ts.

Votre-composant.component.html

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

Votre-composant.component.ts

...
yourNumber: number = 100;

formatNumbar(value: number): string {
    if (value <= 99) {
        return value.toString();
    } else {
        return '99+'
    }
...
1
kuklyy 17 juil. 2019 à 09:17

Vous ne pouvez pas utiliser {{}} dans un autre {{}}

Essaye ça:

{{(unreadNotificationsCount < 99) ? unreadNotificationsCount : '99+'}}
1
Adrita Sharma 17 juil. 2019 à 08:58