Angular 变量和角点之间的剩余空间，如何清理？

在我的html模板中有一个带有

ng container

的条件块。呈现的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>

输出为：

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

心理算术。平台订阅。
问题在于
span
是一个内联元素。这就是解析器保留其中所有空白的原因

因此，每一行、制表符和空格都将被修剪成一个空格

尝试使用其他元素，如div或其他

是消除空白的代码的当前版本。
如果您感兴趣，我添加了一个指向编译器部分的链接。我尝试将它们保留在div中，但仍然得到了空格：Mental Artihmetics。平台订阅。我用更详细的解释更新了这个问题，没有span我得到了什么，在div中，只有ng容器标记。重复的原因是什么？尝试更新html，使其看起来像这样：

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