Избыточное пространство между переменной и точкой в ​​Angular, как его очистить?

Question

У меня есть блок условий с ng-containerв моем шаблоне Angular html. Визуализированный html содержит для меня необъяснимое пространство, как я могу его обойти?

Часть шаблона:

                         <span>
                            <ng-container [ngSwitch]="languageService.currentLang">
                                <ng-container
                                    *ngSwitchCase="'en'">{{accessSubscriptionPlan.subjects[0]?.nameEn}}
                                </ng-container>
                                <ng-container
                                    *ngSwitchCase="'ru'">{{accessSubscriptionPlan.subjects[0]?.nameRu}}
                                </ng-container>
                                <ng-container
                                    *ngSwitchCase="'tt'">{{accessSubscriptionPlan.subjects[0]?.nameTt}}
                                </ng-container>
                            </ng-container>
                            <ng-container *ngIf="accessSubscriptionPlan.subjects[1]">
                                <!--<a [routerLink]="['/subject', accessSubscriptionPlan.subject?.id, 'view']">{{accessSubscriptionPlan.subject?.name}}</a>-->
                                <ng-container [ngSwitch]="languageService.currentLang">&
                                    <ng-container
                                        *ngSwitchCase="'en'">{{accessSubscriptionPlan.subjects[1]?.nameEn}}
                                    </ng-container>
                                    <ng-container
                                        *ngSwitchCase="'ru'">{{accessSubscriptionPlan.subjects[1]?.nameRu}}
                                    </ng-container>
                                    <ng-container
                                        *ngSwitchCase="'tt'">{{accessSubscriptionPlan.subjects[1]?.nameTt}}
                                    </ng-container>
                                </ng-container>
                            </ng-container>
                            .</span>
                            <span
                                jhiTranslate="businesslogic.shop.subscription.platform">Platform Subscription</span>

И последний созданный html:

<div> 
   <span> <!----> <!----><!---->Mental arithmetics  <!----> <!---->  <!----><!----> <!---->&amp; <!----><!---->Speed reading  <!----> <!---->   .</span> 
   <span jhitranslate="businesslogic.shop.subscription.platform">Platform Subscription.</span> 
</div>

Почему у меня есть пробелы между... чтением и точкой?

UPD.

Я старался не использовать span, но я все еще с нами ng-container и все еще получаю пробелы:

<div *ngIf="accessSubscriptionPlan.subjects[0]">
                                <!--<a [routerLink]="['/subject', accessSubscriptionPlan.subject?.id, 'view']">{{accessSubscriptionPlan.subject?.name}}</a>-->
                                <ng-container [ngSwitch]="languageService.currentLang">
                                    <ng-container
                                        *ngSwitchCase="'en'">{{accessSubscriptionPlan.subjects[0]?.nameEn}}
                                    </ng-container>
                                    <ng-container
                                        *ngSwitchCase="'ru'">{{accessSubscriptionPlan.subjects[0]?.nameRu}}
                                    </ng-container>
                                    <ng-container
                                        *ngSwitchCase="'tt'">{{accessSubscriptionPlan.subjects[0]?.nameTt}}
                                    </ng-container>
                                </ng-container>
                                <ng-container *ngIf="accessSubscriptionPlan.subjects[1]">
                                    <!--<a [routerLink]="['/subject', accessSubscriptionPlan.subject?.id, 'view']">{{accessSubscriptionPlan.subject?.name}}</a>-->
                                    <ng-container [ngSwitch]="languageService.currentLang">&
                                        <ng-container
                                            *ngSwitchCase="'en'">{{accessSubscriptionPlan.subjects[1]?.nameEn}}
                                        </ng-container>
                                        <ng-container
                                            *ngSwitchCase="'ru'">{{accessSubscriptionPlan.subjects[1]?.nameRu}}
                                        </ng-container>
                                        <ng-container
                                            *ngSwitchCase="'tt'">{{accessSubscriptionPlan.subjects[1]?.nameTt}}
                                        </ng-container>
                                    </ng-container>
                                </ng-container>
                                .
                                <span
                                    jhiTranslate="businesslogic.shop.subscription.platform">Platform Subscription</span>
                            </div>

и вывод:

<div> <!----> <!----><!---->Mental arithmetics  <!----> <!---->  <!----> . <span jhitranslate="businesslogic.shop.subscription.platform">Platform Subscription.</span> </div>

Answer 1

Проблема в том, что spanявляется встроенным элементом. Вот почему парсер сохраняет в себе все пробелы.

Таким образом, каждая новая строка, табуляция и пробел будут объединены в 1 пробел.

Попробуйте использовать другой элемент, например div или около того.

Вот текущая версия кода, который удаляет пробелы.