Угловое положение бейджа в Chrome

Question

Использование последней версии Angular. Я пытаюсь использовать мат-значок «Угловые материалы», чтобы отобразить количество приземлений, которые игрок бросает, но только в хроме позиция значка смещается при увеличении числа. При запуске в Firefox положение значка является желаемым.

Вот HTML-код:

<p>Touchdowns<span matBadge="{{touchdowns}}" matBadgeOverlap="false"></span></p>
<button (click)="addTouchdown()">Score Touchdown<button>

Вот TS-код:

this.touchdowns:number = 0;

addTouchdown(){
    this.touchdowns++;
}

Нет стилевого применения, кроме стандартного стилевого оформления из угловых.

Answer 1

Вы ставите свой значок не на тот элемент. Попробуйте использовать его следующим образом:

<p>
    <span [matBadge]="touchdowns" matBadgeOverlap="false">
        Touchdowns
    </span>
</p>
<button (click)="touchdowns++"> Score Touchdown <button>

Вы должны использовать matBadge на элементе, для которого вы хотите получить значок.

См. Угловой материал Пример значка .